换行后如何在 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中文网其他相关文章！