래핑할 때 행 전체에 걸쳐 일관된 Flex 항목 너비를 유지하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

래핑할 때 행 전체에 걸쳐 일관된 Flex 항목 너비를 유지하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-24 19:46:12

원래의

519명이 탐색했습니다.

How to Maintain Consistent Flex Item Widths Across Rows When Wrapping?

래핑된 Flex 항목이 이전 행 너비를 유지하도록 보장

Flex 컨테이너에서 Flex 항목이 래핑될 때 허용되는 최대 공간을 차지하는 경향이 있어 너비가 일치하지 않게 됩니다. 서로 다른 행의 항목 사이. 이 문제를 해결하기 위해 다음 CSS 트릭을 사용할 수 있습니다.

솔루션 1: Flex 항목용 사용자 정의 Mixin

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

로그인 후 복사

솔루션 2: 요소 쿼리용 Flex 컨테이너 믹스인

Mixin:

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

로그인 후 복사

위 내용은 래핑할 때 행 전체에 걸쳐 일관된 Flex 항목 너비를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!