Question

在启用包装的flexbox中，flex-grow属性的行为与我不同的方式：逐行确定增长。以下是两个示例，一个没有flex-grow，另一个有flex-grow：

.container {
  border: dotted 1px green;
  display: flex;
  flex-wrap: wrap;
  width: 400px;
}
.container > div {
  background-color: red;
  height: 100px;
  width: 100px;
  margin: 10px;
}
.container.grow > div {
  flex-grow: 1;
}

<div class="container"><div></div><div></div><div></div><div></div><div></div></div>

<div class="container grow"><div></div><div></div><div></div><div></div><div></div></div>

我希望所有子div元素具有与第一个容器中相同的宽度，但仍允许扩展该宽度以填充容器。换句话说，我希望所有子div元素具有在第二个容器的第一行中使用的大小。 flexbox有没有允许的选项？如果没有，CSS是否提供任何其他选择？

注意：我在这里仅使用固定宽度作为一个简单的例子。容器和子宽度在我的真实页面中都是动态的。

Chris Wright's Flexbox adventures显示了似乎有效的内容（查找“源排序”），但不是一般解决方案。它使用@media和min-width来动态更改所包含项目的宽度（将flex-basis设置为百分比）。但要完成这项工作需要知道内容何时会换行。我正在尝试使用flex-wrap以便我不必担心它，这样我就可以让浏览器为我做出决定。

Answer 1

似乎可以通过创建与实际内容具有相同宽度的填充项来实现此工作，但是高度为零使得它们在最后一个内容行之后变得不可见。必须创建足够的填充项以确保填满最后一个内容行，但创建超过所需的内容是无害的。我创建了与内容项一样多的填充项。

它有点棘手，因为如果容器足够大，那些填充项可以最终在第一行。使用额外的div元素层，并给它们最小宽度为20％（基于五个内容框），在这种情况下强制它们在第二行。

动画演示（无论如何都在Chrome和Firefox中）：

＆＃13;

.container {
  border: dotted 1px green;
  display: flex;
  flex-wrap: wrap;
  animation: resize 10s linear infinite;
}
@keyframes resize {
  0%, 100% { width: 120px; }
  50% { width: 1000px; }
}
.container > div {
  flex: 1 0 auto;
  min-width: 20%;
}
.container-item {
  background-color: red;
  height: 100px;
  min-width: 100px;
  margin: 10px;
}
.container-filler {
  min-width: 100px;
  margin: 0 10px;
}

＆＃13;

<div class="container">
  <div><div class="container-item"></div></div>
  <div><div class="container-item"></div></div>
  <div><div class="container-item"></div></div>
  <div><div class="container-item"></div></div>
  <div><div class="container-item"></div></div>
  <div><div class="container-filler"></div></div>
  <div><div class="container-filler"></div></div>
  <div><div class="container-filler"></div></div>
  <div><div class="container-filler"></div></div>
  <div><div class="container-filler"></div></div>
</div>

＆＃13;

如何使包装好的flexbox内容平等增长？

1 个答案: