为什么 flex 项目不包装？

Question

我正在尝试制作具有相同高度的多行正方形（每行 3 个）。

我为此写了一些 HTML 和 CSS，但是这些框都在同一行上。

这是我目前的情况：

#list-wrapper {
  display: flex;
  width: 100%;
}
#list-wrapper div {
  width: 33.33%;
}
#list-wrapper div img {
  flex: 1;
}

<div id="list-wrapper">
  <div>
    <img src="images/1.png" alt="image one" />
  </div>
  <div>
    <img src="images/2.png" alt="image two" />
  </div>
  <div>
    <img src="images/1.png" alt="image one" />
  </div>
  <div>
    <img src="images/2.png" alt="image two" />
  </div>
  <div>
    <img src="images/1.png" alt="image one" />
  </div>
  <div>
    <img src="images/2.png" alt="image two" />
  </div>
</div>

当我用这个加载页面时，所有的框都会出现，但它们都在一条线上，超过了父 div 的 100% 宽度。

Answer 1

如果您正在使用 flexbox 并希望内容换行，则必须指定 flex-wrap: wrap。默认情况下弹性项目不换行。

这里的代码什么都不做，因为 #list-wrapper div img 的父级不是 display: flex。您需要将其移至 #list-wrapper div：

#list-wrapper div img {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

要使图像三横，您应该指定 flex-basis: 33.33333%。

将您的 CSS 更改为此，它将起作用：

#list-wrapper {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

#list-wrapper div {
    flex: 0 0 33.333%;
}

JS Fiddle: https://jsfiddle.net/f47prnnt/1/

Answer 2

弹性容器的初始设置是flex-wrap: nowrap。

这意味着当您创建一个弹性容器时（通过将 display: flex 或 display: inline-flex 应用到一个元素），所有子元素 ("flex items") 都被限制在一行中。

要启用弹性项目包装，请使用 flex-wrap: wrap。

以下是弹性属性如何工作的几个示例：

一个简单的 flex 容器，带有包含图像的各种 flex 项目：

#list-wrapper {
    display: flex;
    border: 1px solid black;
}

#list-wrapper div {}

#list-wrapper div img {
    height: 150px;
    width: 150px;
}

<div id="list-wrapper">
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>

请注意，只声明了一个 flex 属性：display: flex。这建立了弹性容器。以下行为是默认的：

flex-wrap: nowrap
flex-direction: row
justify-content: flex-start

要允许项目换行，请添加 flex-wrap: wrap:

#list-wrapper {
    display: flex;
    flex-wrap: wrap; /* NEW */
    border: 1px solid black;
}

#list-wrapper div { }

#list-wrapper div img {
    height: 150px;
    width: 150px;
}

<div id="list-wrapper">
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>

要每行只允许三个项目，请使用 flex 属性:

#list-wrapper {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid black;
}

#list-wrapper div {
    margin: 10px;
    flex: 1 1 calc(33.33% - 20px); /* flex-grow, flex-shrink, 
                                      flex-basis: (width - margin) */
}

#list-wrapper div img {
    height: 150px;
    width: 150px;
}

<div id="list-wrapper">
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>

此外，默认情况下所有弹性项目都具有相同的高度 (align-items: stretch)。

#list-wrapper {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid black;
}

#list-wrapper div {
    margin: 10px;
    flex: 1 1 calc(33.33% - 30px);
    border: 1px solid #ccc;
    background-color: lightgreen;
    text-align: center;
}

#list-wrapper div img {
    height: 150px;
    width: 150px;
}

<div id="list-wrapper">
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>

如果恢复 flex-wrap: nowrap 并给容器一个高度，拉伸会更明显：

#list-wrapper {
    display: flex;
    /* flex-wrap: wrap; */
    border: 1px solid black;
    height: 600px;
}

#list-wrapper div {
    margin: 10px;
    flex: 1 1 calc(33.33% - 30px);
    border: 1px solid #ccc;
    background-color: lightgreen;
    text-align: center;
}

#list-wrapper div img {
    height: 150px;
    width: 150px;
}

<div id="list-wrapper">
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>

为什么 flex 项目不包装？

Why are flex items not wrapping?

html

css

flexbox