41

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

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

这是它现在的样子：

在此处输入图像描述

这也是我希望它看起来的样子（我已经手动管理了这些底部项目的宽度，只是为了显示预期的结果）：

在此处输入图像描述

.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>

这是一个小提琴演示。

4

2 回答 2

51

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

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

但是，最后一行对齐对于另一种 CSS3 技术Grid Layout来说不是问题。事实上，使用这种方法非常简单（并且不需要更改 HTML）：

.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;
}
<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>

jsFiddle 演示

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

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

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

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

浏览器对 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

于 2017-05-24T12:46:15.803 回答
9

不对，没有纯 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

将来，您将能够使用多个 ::after 伪元素，因此您无需在 HTML 中插入额外的项目。

于 2017-05-24T09:47:17.853 回答