两行或多行显示flex [重复]
Posted
技术标签:
【中文标题】两行或多行显示flex [重复]【英文标题】:Two or more lines of display flex [duplicate] 【发布时间】:2020-01-10 11:46:42 【问题描述】:我想让我自己的项目选项卡创建 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>
【问题讨论】:
【参考方案1】:您可以通过调整弹性项目的宽度来控制列数
结果
#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>
【讨论】:
以上是关于两行或多行显示flex [重复]的主要内容,如果未能解决你的问题,请参考以下文章