我正在尝试制作具有相同高度的多行正方形(每行 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 容器时(通过将 display: flex
或 display: inline-flex
应用于元素)所有子元素(“flex 元素” ) 仅限于一行。
使用 flex-wrap: wrap
来启用 flex items 的包装。
以下是 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; /* 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>
此外,默认情况下所有 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
并给容器一个高度,拉伸(stretch)会更明显:
#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>
关于html - 为什么 flex 元素不包装?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57237082/