使用flexbox之间的空间 [英] Space in between using flexbox

问题描述

我有4个块，我需要使用flexbox添加空间，如下面的屏幕截图所示：。

I have 4 blocks and I need to add space using flexbox as shown in the screenshot below: .

.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>

推荐答案

您可以使用flex-box属性justify-content。
参见---：

You can use flex-box property justify-content. See this---:

.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>

这篇关于使用flexbox之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！