如圖是我使用justify-content:space-around;,但我希望的是第二行子元素能和第一行上下對(duì)齊,其中子元素的數(shù)量不固定,請(qǐng)問(wèn)如何解決?
可能需要點(diǎn)計(jì)算:
.container {
width: 510px;
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
}
.item {
width: 150px;
height: 150px;
background: red;
margin: 10px;
}
<p class="container">
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
</p>
在線查看 https://jsfiddle.net/zktf3oc5/
Flex實(shí)現(xiàn)布局,主要是你的想法突破常規(guī),橫著布局不成功,使用豎軸方向布局,設(shè)為三列,每列,
flex-direction:colomn;
justify-content :space-around;
總的三列再采用一次
justify-content :space-around;