Flexbox 레이아웃에서 래핑된 Flex 항목에 대해 일관된 너비를 달성하는 방법은 무엇입니까?

Flexbox 레이아웃에서 래핑된 Flex 항목의 일관된 너비를 보장하는 방법

문제

Flexbox 레이아웃에서 Flex 항목은 일반적으로 지정된 너비를 준수합니다. 최소 및 최대 너비. 그러나 플렉스 항목이 새 줄로 줄 바꿈되면 사용 가능한 공간을 차지하기 위해 확장되는 경향이 있어 서로 다른 줄의 항목 간에 너비가 일관되지 않게 됩니다.

해결책

직접적인 해결 방법은 없지만 CSS 사양 내에서 이 문제에 대한 해결 방법은 미디어 쿼리를 사용하여 해결할 수 있습니다.

Mixin Approach

SCSS Mixin:

@mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) {
  flex-grow: 1;
  flex-basis: $flex-basis;
  max-width: 100%;

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-viewport-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    @media(min-width: $flex-basis * $multiplier) {
      max-width: percentage(1/$multiplier);
    }
  }
}

사용법:

각 플렉스 항목에 믹스인 적용:

.flex-item {
  @include flex-wrap-fix(100px)
}

설명

이 믹스인은 지정된 플렉스를 기반으로 일련의 미디어 쿼리를 생성합니다. -플렉스 아이템을 기반으로 합니다. 각 미디어 쿼리는 100%를 해당 줄에 맞는 플렉스 항목 수로 나누어 주어진 뷰포트 너비에 대한 플렉스 항목의 최대 너비를 계산합니다.

컨테이너 기반 제어를 위한 업데이트된 믹스인

경우에 따라 Flex 컨테이너의 너비가 뷰포트 너비와 일치하지 않을 수 있습니다. 이 문제를 해결하기 위해 업데이트된 버전의 믹스인을 대신 플렉스 컨테이너에 적용할 수 있습니다.

@mixin flex-container-wrap-items($flex-basis, $max-expected-width: 2000px) {
  display: flex;
  flex-wrap: wrap;

  > * {
    max-width: 100%;
    flex-grow: 1;
    flex-basis: $flex-basis;
  }

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-expected-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    &[min-width~="#{$flex-basis * $multiplier}"] > * {
      max-width: percentage(1/$multiplier);
    }
  }
}

사용법:

믹스인을 플렉스 컨테이너에 적용합니다.

.flex-container {
  @include flex-container-wrap-items(100px)
}

예

수정된 CodePen 예는 여기에서 찾을 수 있습니다:
http://codepen.io/anon/pen/aNVzoJ

주의 사항

• 이 접근 방식은 모든 행의 플렉스 항목 간에 동일한 너비를 지원하지 않습니다.
• 최대 뷰포트 너비를 알고 있는 경우 과도한 미디어 쿼리를 피하기 위해 이를 지정해야 합니다.

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