換行時如何保持行間 Flex 項目寬度一致？-css教學-PHP中文網

換行時如何保持行間 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);
    }
  }
}

登入後複製

用法：

將mixin 套用於Flex項目：

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

登入後複製

解決方案2：用於元素查詢的Flex 容器Mixin

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中文網其他相關文章！