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>
