我想让我自己的元素选项卡创建 4 个 div 并给它们 display:flex
和align-items:center
一切正常,但我想制作例如 12 div 和 3 列,所以第一列将是 4 div 第二个 4 和第三个 4
#projects #projects {
display: flex;
align-items: center;
margin-top:15px;
justify-content: center;
}
#projects div{
width:200px;
height:170px;
background: red;
display: inline-block;
margin:0 auto;
}
<div id="projects">
<div></div>
<div></div>
<div></div>
<div></div>
<!-- I want 8 more divs but when I add it they are all in one column -->
</div>
最佳答案
您可以通过调整 flex 元素的宽度来控制列数
结果
#projects {
display: flex;
flex-wrap: wrap; /* row wrapping*/
align-items: center;
margin-top: 15px;
justify-content: center;
}
#projects div {
width: calc((100% - 40px) / 4); /* 4 items in row (with 40px for margins) */
height: 170px;
background: red;
display: inline-block;
margin: 5px;
border: 1px solid #fff;
box-sizing: border-box;
}
<div id="projects">
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
</div>
关于html - 两行或多行显示柔性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57841646/