如何使用媒體查詢保持包裹的 Flex 項目的寬度一致？

保持包裹的Flex 項目的統一寬度

當使用Flexbox 來顯示一系列項目時，可能需要保持統一的寬度對於項目，即使它們換行為多行。傳統上，這提出了挑戰，特別是當專案的寬度在使用 min-width 和 max-width 指定的範圍內時。

本文提出了一種非常規但有效的解決方法，它利用媒體查詢來實現所需的效果.

混音(SCSS)

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

說明

我們建立媒體查詢根據瀏覽器視窗寬度定義項目的最大寬度。例如，如果每個專案的最大寬度為 100px，我們會為 100px 到 600px 的瀏覽器寬度建立媒體查詢，確保專案寬度適當地適應不同的瀏覽器尺寸。

透過實作此 mixin，包裹的彈性項目將保持其定義的寬度，同時保持在指定的約束範圍內。需要注意的是，Flex 容器寬度應與視窗大小相符，以防止差異。

此外，提供的更新允許將解決方法應用於 Flex 容器，確保正確的項目包裝和寬度維護，無論如何彈性容器寬度。

以上是如何使用媒體查詢保持包裹的 Flex 項目的寬度一致？的詳細內容。更多資訊請關注PHP中文網其他相關文章！