Ant-design: 동일한 높이 항목

이해가 안 돼요， a lot of layout issues 은(는) 무슨 뜻인가요?

Row height === max(Col height) 따라서 레이아웃 문제가 발생하지 않습니다. https://codesandbox.io/s/my8p6vk7wj

열(및 기타 요소)을 행 내부의 높이와 동일하게 만드는 기능을 추가하는 것을 의미합니다.

귀하의 예는 현재 다음과 같습니다.

그러나 <Row equal-heights> 를 추가하면 내용이 다음과 같이 표시됩니다.

그렇군요... 그럴싸해 보입니다.

vertical-fill 호출하는 것이 더 낫습니까?

우리는 이것이 필요하지 않다고 생각합니다. 어린이의 키는 어린이의 콘텐츠 또는 스타일에 맡겨야합니다.

@yutingzhao1991 @ddcat1115 같은 문제가 발생합니다. 누구에게나 그에 대한 해결책이 있습니까?

이 문제에 대한 해결 방법이 있습니까?

아니요

type="flex"와 함께 flexbox 지원 행을 사용하고 열 내용에서 높이를 100%로 설정하면 저에게 효과적이었습니다.

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

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

고마워요 앨빈. type='flux'로 설정하면 효과적입니다. 그러나 열 내용에서도 높이를 100%로 설정하는 것을 잊지 마십시오. 열 자체가 아니라 열 아래의 구성 요소여야 합니다.

내 그리드에 카드가 있습니다. 행 유형을 "플럭스"로 설정하고 카드의 높이를 "100%"(이 스레드에서 제안한 대로)로 설정하면 각 카드가 행의 전체 높이를 채운다는 의미에서 완벽하게 작동합니다. 그러나 카드의 작업 표시줄은 더 이상 행 맨 아래에 있지 않습니다. 다음과 같습니다.

행 높이로 확장되고 행 맨 아래에 카드 작업 버튼이 있는 그리드에 카드를 표시하려면 어떻게 해야 합니까?

메타 태그에서 클래스를 추가하고 고정 높이를 지정할 수 있습니다. 좋다

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

CSS:

.cardBodyStyle {
    height: 100px;
}

type="flex"와 함께 flexbox 지원 행을 사용하고 열 내용에서 높이를 100%로 설정하면 저에게 효과적이었습니다.

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

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

이것은 올바른 방법입니다

이 접근 방식을 사용하여 자식 노드를 사용 가능한 모든 공간(수직 및 수평)으로 늘립니다.

<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>

나를 위해 이들 중 어느 것도 작동하지 않았습니다. 해결책은 height: 100% 를 제거하고 Col 태그에 display: inline-flex 및 align-self: stretch 를 설정하는 것입니다. Col 내부에 여러 요소가 있는 경우 Col에 자식이 하나만 있도록 다른 컨테이너에 요소를 래핑해야 합니다.