如何在 Flexbox 佈局中實現包裹 Flex 項目的一致寬度？

如何確保Flexbox 佈局中包裹的Flex 項目的寬度一致

問題

在Flexbox 佈局中，Flex 項目通常遵循指定的最小和最大寬度。然而，當彈性項目換行到新行時，它們往往會擴展以佔據可用空間，從而導致不同行上的項目之間的寬度不一致。

解決方案

雖然沒有直接的解決方案對於 CSS 規範中的此問題，可以使用媒體查詢來實現解決方法。

Mixin 方法

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

用法：

將mixin 應用於每個Flex項目：

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

說明

此 mixin 依據指定的 Flex 產生一系列媒體查詢- 彈性項目的基礎。每個媒體查詢透過將 100% 除以適合該行的 Flex 項目數量來計算給定視窗寬度的 Flex 項目的最大寬度。

更新了基於容器的控制項的 Mixin

在某些情況下，Flex容器的寬度可能與視窗寬度不符。為了解決這個問題，可以將mixin 的更新版本應用於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);
    }
  }
}

用法：

將mixin 套用到Flex 容器中：

.flex-container {
  @include flex-container-wrap-items(100px)
}

範例

修改後的CodePen範例可以在這裡找到：
http://codepen.io/anon/pen/aNVzoJ

注意事項

• 此方法不支援所有行上的Flex 專案之間的寬度相等。
• 如果最大視口寬度已知，則應指定它以避免過多的媒體查詢。

以上是如何在 Flexbox 佈局中實現包裹 Flex 項目的一致寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！