我有一个应用程序,我在其中使用 flexbox 来显示 8 个列表项,这些项将随我的页面动态调整大小。我如何强制它将元素分成两行? (每行 4 个)?
这是 jsfiddle:https://jsfiddle.net/Mwanitete/ge36dcf8/15/
.parent{
display: flex;
flex-wrap: wrap;
}
.child{
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
flex: 1 0 20%;
margin: 5px;
height: 100px;
}
<div class="parent">
<ul class="child">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</div>
最佳答案
看看这个(几乎)详尽的tutorial能够使用 flexbox 的全部功能。我得到了这个结果:
.parent {
font-family: Arial, sans-serif;
font-size: 12px;
}
.child {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 5px;
padding: 0;
height: 100px;
}
.child li {
width: 23%;
height: 49px;
margin: 1px 1%;
text-align: center;
background: #069;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
<div class="parent">
<ul class="child">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</div>
它是(类似于)您想要的吗?
关于html - 使用 Flexbox 使无序列表响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51976421/