Setting vertical gaps between flex items

Question

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:

Boxes in the last row should be adjusted to the left.
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>

score 6 · Answer 1 · answered Apr 09 '19 at 02:12

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>

score 2 · Answer 2 · edited Mar 20 '22 at 15:44

2

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

edited Mar 20 '22 at 15:44

Dave

3,073
7
20
33

answered Mar 17 '22 at 11:23

Abhishek Jadhav

21
2

gap is not supported for every browser (For example ie11) – Sfili_81 Mar 17 '22 at 15:41
check browser. https://caniuse.com/?search=gap – junho May 02 '22 at 09:09

score 1 · Answer 3 · answered Apr 09 '19 at 01:19

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;

score 1 · Answer 4 · answered Apr 09 '19 at 04:23

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>

score 1 · Answer 5 · answered Apr 09 '19 at 07:06

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>

score 0 · Accepted Answer · answered Apr 09 '19 at 01:02

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

Setting vertical gaps between flex items

6 Answers6