Ant-design: Itens de altura igual

Eu não entendo ， O que a lot of layout issues significa?

Altura da linha === max (altura da coluna), portanto, não trará problemas de layout. https://codesandbox.io/s/my8p6vk7wj

Quero dizer, adicionar um recurso para tornar as colunas (e outros elementos) com alturas iguais dentro de uma linha.

Seu exemplo atualmente se parece com este:

Mas seria bom adicionar <Row equal-heights> e o conteúdo aparecerá assim:

Entendo ... Parece razoável.

Talvez chamar vertical-fill melhor?

Acho que não precisamos disso, a altura das crianças deve deixar para o conteúdo infantil ou para o seu estilo.

@ yutingzhao1991 @ ddcat1115 Estou tendo os mesmos problemas. Alguém tem uma solução para isso?

Alguma resolução sobre este problema?

não

Usar linhas habilitadas para flexbox com type = "flex" e definir a altura para 100% no conteúdo da coluna funcionou bem para mim.

<Row gutter={16} type="flex">

https://ant.design/components/grid/#Row

Obrigado Alvin. Para mim, funciona definir type = 'flux'. Mas não se esqueça de definir a altura para 100% no conteúdo da coluna também. Não a coluna em si, deve ser o componente abaixo da coluna.

Tenho cartas na minha grade. Definir o tipo de linha para "fluxo" e a altura do cartão para "100%" (como sugerido neste tópico) funciona perfeitamente no sentido de que cada cartão preenche a altura total da linha. No entanto, a barra de ação da carta não está mais na parte inferior da linha. Se parece com isso:

Como posso ter cartas em uma grade que se expande até a altura da linha e com os botões de ação de cartas na parte inferior da linha?

na meta tag, você pode adicionar uma classe e especificar sua altura fixa. Gostar

<Card>
 <Meta  
  className="cardBodyStyle"
  title={key.title}
  description={key.description}
 />
</Card>

css:

.cardBodyStyle {
    height: 100px;
}

Usar linhas habilitadas para flexbox com type = "flex" e definir a altura para 100% no conteúdo da coluna funcionou bem para mim.

<Row gutter={16} type="flex">

https://ant.design/components/grid/#Row

este é o caminho certo

Tente esta abordagem para esticar o nó filho para todo o espaço disponível (vertical e horizontalmente)

<Row gutter={16}>
    <Col span={12} style={{display: 'flex'}}>
        <Card style={{flex:1}}>
            1<br/>2<br/>3
        </Card>
    </Col>
    <Col span={12} style={{display: 'flex'}}>
        <Card style={{flex:1}}>
            1<br/>2
        </Card>
    </Col>
</Row>

Para mim, nada disso estava funcionando. A solução foi remover height: 100% e definir display: inline-flex e align-self: stretch nas tags Col. Se você tiver vários elementos dentro do Col, precisará envolvê-los em outro contêiner para que o Col tenha apenas um filho.