使用flexbox之间的空间

Question

我有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>

Answer 1

您可以使用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>