Space in between using 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>

回答1:

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>

回答2:

It is a little tricky but not impossible. Use padding instead of margins. This will work no matter how many items do you have. The only restriction is to have 2 columns only.

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

回答3:

Add justify-content:space-between; to your .container I think this will resolve the issue! Thanks.

回答4:

change the width:50% of block to width:49% its work

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.block {
  width: 49%;

}

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

回答5:

Please try this code. Here you need to require to reduce the width of block and add padding-right to block class.

.block {
    width: 48%;
    padding-right: 2%;
}

Hope this helps.

回答6:

I added a invisible div with space class, resumed 50% div's to 45%, gave space 5%

.container {
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 45%;
}
.space {
width: 5%;

<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="space"></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="space"></div>
  <div class="block">
    <h5>Cras nita</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p>
  </div>
</div>

回答7:

You can use justify-content: space-around or justify-content: space-between if you want to add space between blocks.

Or you can reduce the size of your blocks like that

.block {
  width: 40%;
  margin: 0 2.5%
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

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

.container {
  display: flex;
  flex-wrap: wrap;
}

.block {
  /* changed the width to 45% and added auto margin */
  width: 45%;
  margin:auto;
  
}
.right{
margin-right:0px;
}
.left{
margin-left:0px;
}

<div class="container">
  <div class="block left">
    <h5>New</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p>
  </div>
  <div class="block right">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block left">
    <h5>Cras conva</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block right">
    <h5>Cras nita</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p>
  </div>
</div>

try this