래핑 후 Flexbox 레이아웃에서 일관된 항목 너비를 유지하는 방법은 무엇입니까?

Flexbox 래핑 후 균일한 항목 너비 유지

Flexbox 레이아웃에서는 여러 줄에 걸쳐 일관된 항목 너비를 유지하는 것이 어려울 수 있습니다. 그러나 이는 아래에 설명된 대로 CSS 속성의 조합을 통해 달성할 수 있습니다.

CSS 속성

flex-grow

항목이 증가하는 비율을 설정합니다. 다른 항목. 이를 1로 설정하면 각 항목의 성장 잠재력이 동일합니다.

flex-basis

항목의 초기 크기를 정의합니다. 항목의 최소 너비를 결정합니다.

max-width

항목의 최대 너비를 설정하여 원하는 크기를 초과하지 않도록 합니다.

CSS 미디어 쿼리

미디어 쿼리는 뷰포트 크기에 따라 최대 너비 속성을 조정하여 여러 항목에서 항목 너비 일관성을 유지하는 데 사용됩니다. 행.

예

설명

이 CSS는 각 항목의 초기 너비를 100px로 설정합니다. 그런 다음 뷰포트 크기가 변경됨에 따라 미디어 쿼리를 사용하여 max-width 속성을 조정하여 항목이 새 줄로 바뀔 때에도 원하는 너비를 유지하도록 합니다.

대체 솔루션

Flex -Wrap-Fix Mixin

더 우아한 대안은 flex-wrap-fix를 활용하는 것입니다. mixin:

사용법

flex 항목에 mixin 적용:

이 mixin은 CSS 미디어 쿼리와 동일한 결과를 달성하지만 필요성을 제거합니다. 반복적인 코드를 방지하고 유지 관리를 더 쉽게 만듭니다.

위 내용은 래핑 후 Flexbox 레이아웃에서 일관된 항목 너비를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!