Flexbox로 래핑한 후 균일한 Flex 항목 너비를 유지하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Flexbox로 래핑한 후 균일한 Flex 항목 너비를 유지하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-17 02:07:03

원래의

411명이 탐색했습니다.

How to Maintain Uniform Flex-Item Width After Wrapping in Flexbox?

래핑 후 균일한 Flex 항목 너비를 유지하는 방법

Flexbox는 유연한 레이아웃을 생성하는 기능을 제공하지만 플렉스 항목을 래핑하는 경우 너비가 달라질 수 있습니다. 확연히 달라집니다. 이 문제를 해결하기 위해 CSS 미디어 쿼리를 사용하여 기발한 해결 방법을 살펴보겠습니다.

해결책

엄밀히 말하면 해결책은 아니지만 다음 접근 방식은 다음을 사용하여 우아한 대안을 제공합니다. JavaScript를 사용하지 않고 미디어 쿼리를 수행할 수 있습니다.

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);
    }
  }
}

로그인 후 복사

사용

플렉스에 믹스인을 적용하세요. item:

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

로그인 후 복사

Advanced Alternative

플렉스 컨테이너의 너비가 뷰포트 크기로 제한되지 않는 경우 브라우저 미디어 쿼리 대신 요소 쿼리를 사용할 수 있습니다. 다음은 플렉스 컨테이너에 대한 믹스인입니다.

@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);
    }
  }
}

로그인 후 복사

설명

지정된 각 플렉스 기반에 대해 뷰포트를 기반으로 행당 최대 항목 수를 계산합니다. 너비. 그런 다음 항목의 최대 너비를 뷰포트 너비의 백분율로 제한하는 미디어 쿼리를 생성합니다.

예

아래에서 업데이트된 CodePen을 확인하세요.

https://codepen.io/anon/pen/aNVzoJ

이는 플렉스 항목이 래핑 후 원하는 너비를 유지하여 일관된 레이아웃을 보장하는 방법을 보여줍니다.

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