flexbox 的 Flex-wrap 属性 [重复]答案

【问题标题】：Flex-wrap property for flexbox [duplicate]flexbox 的 Flex-wrap 属性 [重复]
【发布时间】：2018-09-16 00:03:45
【问题描述】：

我有以下代码，

.flex-container {
  padding: 20px;
  margin: 20px;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: space-evenly;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}  
.wrap li {
  background: gold;
}

.flex-item {
  border: 1px solid blue;
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<ul class="flex-container wrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
</ul>

我的问题是， 如何在不改变宽度的情况下使用 flexbox 强制仅 3 个盒子放在一行上？一行应该只有 3 个盒子，其余的空间应该均匀分布，即我想跨 3 行 9 个盒子，每行 3 个盒子。如何使用 flexbox 实现它？

【问题讨论】：

所以你希望每行有 3 个盒子？
@Adam 没错
如果您对不涉及 flexbox 的解决方案感兴趣，可以查看我的更新答案。

标签： javascript html css flexbox

【解决方案1】：

添加所有浏览器支持的flex-basis: 33%，然后使用calc方法去除框之间的边距和填充。

检查我的代码：

.flex-container {
  padding: 20px;
  margin: 20px;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: space-evenly;
}

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.wrap li {
  background: gold;
}

.flex-item {
  border: 1px solid blue;
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  flex-basis: calc(33.3% - 32px);
}

<ul class="flex-container wrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
</ul>

【讨论】：

"不改变它们的宽度"
html结构可以改吗？
你去！有人给了你另一种方法来实现这一目标stackoverflow.com/a/29733127/4796844。
为什么你在 flex-basis 属性中减去了 32px？
它用于margin= 10px; padding= 5px; border= 1px x2，因为它在左右两侧，所以总共是 32px。

【解决方案2】：

如果您希望框固定为 100 像素，您可以设置：

.wrap { flex-wrap: wrap; width: calc(120px * 3 + 40px); }

即

width * num of boxes + wrapper padding

这会始终如一地包装盒子 - 它并不是真正的弹性盒子解决方案，但适用于您的场景。

【讨论】：

【解决方案3】：

有几种骇人听闻的解决方案，请参见此处：https://stackoverflow.com/a/29733127/4796844。遗憾的是，涉及 flexbox 的唯一干净解决方案似乎仅受 Firefox 支持。

我建议您在该用例中使用 CSS Grid。 Here 是学习它的绝佳资源:)

.grid-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;

  padding: 20px;
  list-style: none;
  border: 1px solid silver;
}

.grid-container li {
  background: gold;
}

.grid-item {
  border: 1px solid blue;
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<ul class="grid-container">
  <li class="grid-item">1</li>
  <li class="grid-item">2</li>
  <li class="grid-item">3</li>
  <li class="grid-item">4</li>
  <li class="grid-item">5</li>
  <li class="grid-item">6</li>
  <li class="grid-item">7</li>
  <li class="grid-item">8</li>
  <li class="grid-item">9</li>
</ul>

它对浏览器的支持非常令人满意。您可以查看here。

【讨论】：