为什么d性物品没有包装？

为什么d性物品没有包装？

flex容器的初始设置为

flex-wrap: nowrap

。

这意味着，当您创建一个伸缩容器（通过应用元素

display: flex

或

display: inline-flex

将其应用于元素）时，所有子元素（“伸缩项”）都限于一行。

使flex项可以包装使用

flex-wrap: wrap

。

---

以下是一些有关flex属性如何工作的示例：

一个简单的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容器。默认情况下，以下行为：

• flex-wrap: nowrap

• flex-direction: row

• justify-content: flex-start

要包装物品，请添加

flex-wrap: wrap

：

#list-wrapper {    display: flex;    flex-wrap: wrap;     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); }#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项目的高度都相等（

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