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

Question

有可能像这样制作一个纯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>

这是一个小提琴演示.

Answer 1

目前,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的间隙.它不适用于物品和容器之间的区域.

请注意,上面的设置都在容器级别.与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:将最后一行与网格对齐

将来,您将能够在伪元素之后使用multiple ::,因此您无需在HTML中插入其他项目.