Flexbox 레이아웃에서 래핑된 Flex 항목에 대해 일관된 너비를 달성하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-11-20 04:38:02

원래의

965명이 탐색했습니다.

How to Achieve Consistent Widths for Wrapped Flex Items in Flexbox Layouts?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!