Flexbox는 어떻게 CSS에서 동일한 높이의 열을 얻을 수 있습니까?

CSS의 동일한 높이 열에 대한 Flxexbox 솔루션

코드에서 동일한 높이 열에 대한 백분율이 포함된 테이블을 사용하려고 합니다. 그러나 이 접근 방식에는 문제가 발생할 수 있습니다. 실행 가능한 대안으로 Flexbox 활용을 고려해 보세요.

HTML:

• 1
• 2
• 3
• 4
• 5
• 6

CSS:

ul {
  display: flex;
}

이 간단한 Flexbox 구현을 통해 모든 목록 항목이 항목에 관계없이 동일한 높이를 유지하는지 확인할 수 있습니다. content.

작동 방식:

• 디스플레이:
  의 flex 속성 요소는 이를 플렉스 컨테이너로 선언합니다.
• 기본적으로 플렉스 컨테이너는 하위 요소(플렉스 항목)를 가로로 정렬합니다.
• 기본 align-items: 스트레치 속성은 플렉스 항목이 공간을 차지하도록 지시합니다. 컨테이너의 전체 높이로 인해 높이가 동일해짐 columns.

참고:

• Flexbox 동일 높이 열은 형제 요소에만 적용됩니다.
• 열에 특정 높이 설정 flex 항목은 동일 높이 기능을 재정의합니다.
• 동일 높이 열은 단일 항목 내에서만 작동합니다. line.
• Flexbox에서 동일한 높이 동작을 비활성화하려면 align-items: flex-start 또는 align-items: flex-end를 사용하십시오.

브라우저 지원:

Flexbox는 Chrome, Firefox, Safari, Edge를 포함한 최신 브라우저에서 널리 지원됩니다. IE

위 내용은 Flexbox는 어떻게 CSS에서 동일한 높이의 열을 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!