CSS Flexbox를 사용하여 동일한 높이의 열을 얻으려면 어떻게 해야 하며 제한 사항은 무엇입니까?

CSS

를 사용하는 동일한 높이 열

표는 본질적으로 자동 조정될 수 없기 때문에 CSS 표에 백분율을 사용하려고 할 때 문제가 발생합니다. flexbox 요소와 마찬가지로 콘텐츠의 높이입니다.

Equal Flexbox

HTML

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

CSS

ul {
  display: flex;
}

이 코드를 사용하면, Flexbox는 가장 높은 항목의 높이와 일치하도록 각 목록 항목의 높이를 자동으로 조정합니다.

Flexbox 동일 높이 열에 대한 고려 사항

• Flex 동일 높이 열은 중첩 요소가 아닌 형제 항목에만 적용됩니다.
• 플렉스 항목에 높이를 적용하면 동일한 높이가 무시됩니다. 기능.
• 동일 높이 열은 같은 줄에 있는 Flex 항목에만 적용됩니다.

Flexbox에서 동일 높이 열을 비활성화하려면:

• 대신 align-items를 flex-start 또는 flex-end로 설정하세요. 스트레칭.

위 내용은 CSS Flexbox를 사용하여 동일한 높이의 열을 얻으려면 어떻게 해야 하며 제한 사항은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!