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:

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>

Answer 1

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> 

Answer 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

Answer 3

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> 

Answer 4

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

Answer 5

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;

Answer 6

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>