換行後如何在 Flexbox 佈局中保持一致的項目寬度？

在 Flexbox 換行後保持統一的項目寬度

在 Flexbox 佈局中，在多行中保持一致的項目寬度可能具有挑戰性。但是，這可以透過 CSS 屬性的組合來實現，如下所述：

CSS 屬性

flex-grow

設定項目相對於其他物品。透過將其設為 1，每個項目都具有相同的成長潛力。

flex-basis

定義項目的初始大小。這決定了項目的最小寬度。

max-width

設定項目的最大寬度，確保它不會超過其所需的大小。

CSS 媒體查詢

媒體查詢用於根據視口大小調整max-width 屬性，保持多個項目寬度的一致性

範例

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  max-width: 100px;
  flex: 1 0 0;
}

@media (min-width: 200px) {
  li {
    max-width: 50%;
  }
}

@media (min-width: 300px) {
  li {
    max-width: 33.33333%;
  }
}

說明

此CSS 將每個項目的初始寬度設定為100px。然後，當視窗大小發生變化時，它使用媒體查詢來調整 max-width 屬性，確保項目即使在換行時也能保持所需的寬度。

替代解決方案

Flex -Wrap-Fix Mixin

更優雅的替代方案是利用flex-wrap-fix 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)
}

此 mixin 實現與 CSS 媒體查詢相同的結果，但消除了需要消除重複程式碼並使維護更容易。

以上是換行後如何在 Flexbox 佈局中保持一致的項目寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！