Question

是否可以制作这样的纯CSS解决方案：

项目有一些min-width。
它们应该动态增长以填充所有容器宽度，然后换行到新行
列表中的所有项目都应具有相同的宽度。

现在的样子：

这就是我希望它看起来像的样子（我手动管理这些底部物品的宽度只是为了显示预期的结果）：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

这是fiddle demo。

Answer 1

目前，flexbox没有提供干净的解决方案来对齐最后一行或列中的灵活项目。它超出了当前规范的范围。

以下是人们用来解决问题的更多信息和各种解决方案：

但是，最后一行对齐不是另一种CSS3技术的问题，网格布局。实际上，使用此方法非常简单（并且不需要更改HTML）：

＆＃13;

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

＆＃13;

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

＆＃13;

jsFiddle demo

grid-template-columns属性设置显式定义列的宽度。上面的规则告诉网格容器创建尽可能多的列（auto-fit），每列的宽度最小为100px，最大为1fr，这会消耗剩余的空间（类似于flex-grow: 1）。如果行上没有更多空间，则会创建一个新行。

grid-auto-rows属性设置自动创建的行的高度。在这个网格中，每行高20px。

grid-gap属性是grid-column-gap和grid-row-gap的简写。此规则在网格项之间设置10px间隙。它不适用于物品和容器之间的区域。

请注意，上面的设置都是容器级别的。与flex项目不同，我们可以从网格项中删除高度，宽度和边距（在一定程度上）的职责。

CSS网格的浏览器支持

Chrome - 完全支持截至2017年3月8日（第57版）

Firefox - 完全支持截至2017年3月6日（第52版）

Safari - 完全支持截至2017年3月26日（版本10.1）

Edge - 截至2017年10月16日（第16版）的全面支持

IE11 - 不支持当前规范;支持过时版本

以下是完整图片：http://caniuse.com/#search=grid
Firefox中的
酷网格覆盖功能： 在Firefox开发工具中，当您检查网格容器时，CSS声明中有一个微小的网格图标。单击它会在页面上显示网格的轮廓。

此处有更多详情：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Answer 2

没错，没有纯CSS解决方案。 Flexbox始终尝试使用可增长的项目填充容器的整个宽度。因此，您需要插入一些隐藏的项目，这些项目将填充空白区域，同时对用户不可见。

试试这个：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}

.item-hidden {
  min-width: 100px;
  flex-grow: 1;
  border: 1px solid transparent;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
</div>

此处讨论了类似的问题：Flex-box: Align last row to grid

将来，您可以在伪元素之后使用multiple ::，因此您无需在HTML中插入其他项目。

即使在包裹后，也可以弯曲相同宽度的物品

2 个答案:

jsFiddle demo