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

CSS를 사용한 동일 높이 열: 대안으로 Flexbox 탐색

CSS 레이아웃에서 동일 높이 열을 추구하면 백분율 기반 테이블에 의존할 때 문제가 발생할 수 있습니다. . 이 문제를 해결하기 위해 Flexbox는 모든 열에 대해 동일한 높이를 보장하는 강력한 솔루션을 제공합니다.

HTML 구조

HTML 구조는 에서와 동일하게 유지됩니다. 원본 코드:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

업데이트됨 CSS

동일 높이 열에 대해 Flexbox를 구현하려면 CSS를 수정해야 합니다.

ul {
  display: flex;
}

이 간단한 변경으로 ul이 Flex 컨테이너로 변환되고 직계 하위 요소가 됩니다. (li) 플렉스 아이템이 됩니다. 기본적으로 flexbox는 flex-direction: 행을 적용하여 항목을 가로로 정렬합니다.

고려 사항

• 항목 정렬: 늘이기

  • align-items의 추가 기본 설정: 늘어남으로 인해 굴곡이 발생함 항목을 컨테이너의 전체 높이로 확장합니다.

• 동등한 높이는 형제에만 적용됩니다.

  • 이 기능은 동일한 플렉스 내의 항목에만 영향을 미칩니다. 컨테이너.

• 높이 재정의

  • 플렉스 항목에 높이를 수동으로 설정하면 동일한 높이 동작이 재정의됩니다.

• 같은 줄의 동일한 높이

  • 동일한 높이는 동일한 플렉스 항목에만 적용됩니다. line.

• 동일 높이 비활성화

  • 개별 플렉스 항목에 flex-shrink: 1을 설정하면 동일한 높이 동작이 비활성화될 수 있습니다.

브라우저 지원

Flexbox는 10 이전의 IE 버전을 제외한 모든 주요 브라우저에서 광범위하게 지원됩니다. 여러 브라우저에서 일관된 지원을 받으려면 Autoprefixer를 사용하여 공급업체 접두사를 자동으로 추가하는 것을 고려해 보세요.

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