css – 如何保持包装flex-items与上一行的元素相同的宽度?

前端之家收集整理的这篇文章主要介绍了css – 如何保持包装flex-items与上一行的元素相同的宽度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个< ul>这是一个flex-Box和其中的一堆< li>它们是flex-items。

我试图获得< li>具有灵活的宽度,使用最小宽度和最大宽度保持在两个尺寸之间。只要他们在同一条线上,它的工作很棒。但是,当它们包装时,< li>在新线上使用尽可能多的空间。这意味着他们在第一线很小,而在第二线,当只有其中一些时,他们是大的。

有没有办法告诉flexBox保持项目宽度的包装后,同时保持灵活的宽度?

包装演示:

我的代码看起来像这样:

<ul>
  <li>
    <figure>
      <img src="http://placekitten.com/g/250/250">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/100/100">
    </figure>
  </li>
  <!-- ... -->
</ul>

和CSS:

ul
  display: flex
  flex-wrap: wrap

  li
    min-width: 40px
    max-width: 100px
    flex: 1 0 0

Here’s a live example on codepen with some extra comments,调整你的窗口大小看看它包装。

解决方法

TL; DR

这不是我所称的解决方案本身,但它是一个相当优雅的解决方法,只使用媒体查询,更重要的是没有JavaScript!

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

用法

@include flex-wrap-fix(100px)

说明:

比方说,按照OP的例子,我们希望每个项目的最大宽度为100px,所以我们知道,对于100px的浏览器宽度,我们可以每行匹配一个项目,依此类推:

| Viewport Width | Max Item Count Per Row | Item Width (min-max) |
|----------------|------------------------|----------------------|
| <= 100         | 1                      | 0px - 100px          |
| <= 200         | 2                      | 50px - 100px         |
| <= 300         | 3                      | 50px - 100px         |
| <= 400         | 4                      | 50px - 100px         |
| <= 500         | 5                      | 50px - 100px         |
| <= 600         | 6                      | 50px - 100px         |

我们可以编写媒体查询来创建以下规则:

| Viewport Width | Max Item Count Per Row | Item Max Width | Calculation |
|------------------------------------------------------------------------|
| <= 100px       | 1                      | 100%           | (100/1)     |
| <= 200px       | 2                      | 50%            | (100/2)     |
| <= 300px       | 3                      | 33.33333%      | (100/3)     |
| <= 400px       | 4                      | 25%            | (100/4)     |
| <= 500px       | 5                      | 20%            | (100/5)     |
| <= 600px       | 5                      | 16.66666%      | (100/6)     |

喜欢这个:

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

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

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

@media(min-width: 400px) {
  li { max-width: 25%; }
}

@media(min-width: 500px) {
  li { max-width: 20%; }
}

@media(min-width: 600px) {
  li { max-width: 16.66666%; }
}

当然,这是重复的,但很有可能你正在使用某种预处理器,这可以照顾你的重复性。这正是上述TL中的mixin; DR部分。

我们现在要做的就是将100px作为我们的flex基础,并且可以选择最大的浏览器窗口宽度(默认为2000px)来创建媒体查询

@include flex-wrap-fix(100px)

最后,一个分叉版本的原始CodePen示例具有所需的输出,使用上面的mixin:

http://codepen.io/anon/pen/aNVzoJ

原文链接:https://www.f2er.com/css/219617.html

猜你在找的CSS相关文章