使用flexbox在两者之间留出空格
使用flexbox在两者之间留出空格
提问于 2017-07-28 17:27:16
我有4个区块，我需要使用flexbox添加空间，如下面的截图所示：
..。
.container {
display: flex;
flex-wrap: wrap;
}
.block {
width: 50%;
}<div class="container">
<div class="block">
<h5>New</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p>
</div>
<div class="block">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
</div>
<div class="block">
<h5>Cras conva</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
</div>
<div class="block">
<h5>Cras nita</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p>
</div>
</div>
回答 8
Stack Overflow用户
回答已采纳
发布于 2017-07-28 17:32:36
您可以使用flex-box属性justify-content。看看这个-：
.container {
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}
.block {
width: 40%;
}<div class="container">
<div class="block">
<h5>New</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p>
</div>
<div class="block">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
</div>
<div class="block">
<h5>Cras conva</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
</div>
<div class="block">
<h5>Cras nita</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p>
</div>
</div>
Stack Overflow用户
发布于 2017-07-28 17:34:27
这有点棘手，但也不是不可能。使用填充而不是边距。这将工作，无论你有多少项目。唯一的限制是只有2列。
.container {
display: flex;
flex-wrap: wrap;
}
.block {
width: 50%;
box-sizing: border-box; /*Set the box sizing to include paddings and borders into the width calculation*/
}
.block:nth-child(odd) {
padding-right: 10px; /*Add right padding for odd items (left side)*/
}
.block:nth-child(even) {
padding-left: 10px; /*Add left padding to even items (right side)*/
}<div class="container">
<div class="block">
<h5>New</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p>
</div>
<div class="block">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
</div>
<div class="block">
<h5>Cras conva</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
</div>
<div class="block">
<h5>Cras nita</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p>
</div>
</div>
Stack Overflow用户
发布于 2017-07-28 17:39:03
将justify-content:space-between;添加到您的.container我认为这会解决这个问题！谢谢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45369770
复制相关文章
相似问题
腾讯云开发者
