我正在尝试制作多个具有相同高度的正方形行（每行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％宽度。
任何帮助深表感谢。
flex容器的初始设置为 flex-wrap: nowrap 。
flex-wrap: nowrap
这意味着，当您创建一个伸缩容器（通过应用元素display: flex或display: inline-flex将其应用于元素）时，所有子元素（“伸缩项”）都限于一行。
display: flex
display: inline-flex
为了使弹性项目能够包装使用flex-wrap: wrap。
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-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属性：
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>
另外，默认情况下，所有flex项目的高度都相等（align-items:stretch）。
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>
