'Setting vertical gaps between flex items

If this is our code, it creates 4 boxes in each row, with an equal vertical space between them , but there are two problems that I don't know how to fix:

  1. Boxes in the last row should be adjusted to the left.

  2. There should be 20px vertical space between boxes.

How can I do that with flexbox?

.wrapper {
  max-width: 80%;
  margin: 20px auto 0;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  /* justify-content: flex-start; */
}

.box {
  flex-basis: 23%;
  height: 100px;
  outline: 1px solid black;
  background-color: #ccc;
  margin-bottom: 20px;
}
<div class="wrapper">

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>
htmlcssflexbox


Solution 1:[1]

I'm not 100% what you're trying to do, but this might do the trick 

.wrapper {
/*   max-width: 80%; */
  margin: 20px auto 0;
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  width: 100%;
/*   justify-content: flex-start; */
}

.box {
  flex-basis: 23.6%;
  height: 100px;
  outline: 1px solid black;
  background-color: #ccc;
  margin: 0 10px 20px 10px;
}

Solution 2:[2]

Fixing the last row alignment problem is a bit complex for flexbox (level 1). The problem is discussed in detail in this post: Targeting flex items on the last or specific row

Your layout, however, is simple with CSS Grid.

.wrapper {
  max-width: 80%;
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21%, 1fr));
  grid-auto-rows: 100px;
  grid-gap: 20px; /*shortand for grid-column-gap & grid-row-gap */
  }

.box {
  outline: 1px solid black;
  background-color: #ccc;
}
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Solution 3:[3]

Try this:

.wrapper{
  justify-content: flex-start;
}
.box {
  flex-basis: 23%;
  margin-right: 2%;
  margin-bottom: 20px;
}

Idea is: 23% + 2% = 25% so there will be 4 objects per line unless you restrict min-width. But the layout is still justify-content: flex-start;

Solution 4:[4]

justify-content: space-between; make center every item in your flex. So, it is not possible to individually give each row a justify-content property. So you can try the below little trick:

.wrapper {
  max-width: 80%;
  margin: 20px auto 0;
  display: flex;
  flex-flow: wrap;
  /* justify-content: space-between; */
  /* justify-content: flex-start; */
}

.box {
  flex-basis: 23%;
  margin: 0 1% 20px;
  height: 100px;
  outline: 1px solid black;
  background-color: #ccc;
}
<div class="wrapper">

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

Solution 5:[5]

I have posted updated code. Please check if it works for you.

.wrapper {
  max-width: 80%;
  margin: 20px auto 0;
  display: flex;
  flex-flow: wrap;
  /*justify-content: space-between;*/
  justify-content: flex-start; 
}

.box {
  flex: 0 0 23%;
  max-width: 23%;
  margin-left: 1%;
  margin-right: 1%;
  height: 100px;
  outline: 1px solid black;
  background-color: #ccc;
  margin-bottom: 20px;
}
<div class="wrapper">

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

Solution 6:[6]

As I am writing today gap (grid property) can be easily used in flexbox and supported by every browser. You get the same functionality it gives in grid layout.

1.For Boxes in the last row should be adjusted to the left. 2.There should be 20px vertical space between boxes.

These two problems can be solved easily with gap:20px and justify-content:left. Here's a sample css code for flexbox container.

enter code here
.partner-container {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    gap: 2vw;
}

Here is an output image enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cody Swann
Solution 2 Michael Benjamin
Solution 3 DeeZee
Solution 4 iamdebadipti
Solution 5 Rhythm Ruparelia
Solution 6 Dave

Related Questions