css - Space in between using flexbox -


i have 4 blocks , need add space using flexbox shown in screenshot below: screenshot.

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

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


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -