CSS FLEXBOX: How to align last item to the left in a justify-content:space-between grid

Question

I have a parent div with styles as follows:

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;

And every child of that div has:

flex: 0 1 32%;

And if I have three child divs it looks as follows:

And that is fine. Here is the fiddle https://jsfiddle.net/2sc7amL1/1/

But the problem is when I have only child elements, then I have something as follows

Here is the fiddle https://jsfiddle.net/2sc7amL1/2/

How can I do that with flex if I have only two child divs that the are left aligned as on the photo

Answer 1

Add justify-content: flex-start to the parent classname.If you need spaces between the children divs, add margin to the child elements.

.parent{
    justify-content: flex-start;
}
.child:nth-child(even){
    margin: 0 20px;
}

here's the edited of your https://jsfiddle.net/v8wnruxc/1/

Answer 2

If you don't want justify-content: flex-start like the other answers. The technique you want might be:

.parent::after {
  content: '';
  flex: 0 1 32%;
}

Try the code below, with 2 and 3 children respectively. Source of the technique: https://haizdesign.com/css/flexbox-align-last-item-grid-left/

 .parent{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; background-color: yellow; } .parent::after { content: ''; flex: 0 1 32%; } .child{ flex: 0 1 32%; background-color: red; height: 400px; }

 <div class="parent"> <div class="child"> Child </div> <div class="child"> Child </div> <div class="child"> Child </div> </div> <div class="parent"> <div class="child"> Child </div> <div class="child"> Child </div> </div>

Answer 3

Check if the :last-child is also the :nth-child(2) . In that case change the margin of the element

 .parent{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; background-color: yellow; } .child{ flex: 0 1 32%; background-color: red; height: 400px; } .parent > div:last-child:nth-child(2) { margin: 0 auto 0 2%; }

 <div class="parent"> <div class="child"> Child </div> <div class="child"> Child </div> </div> <br /> <br /> <div class="parent"> <div class="child"> Child </div> <div class="child"> Child </div> <div class="child"> Child </div> </div>

Answer 4

Maybe Something like that?

.parent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;;
  width: 100%; 
  background-color: yellow;
}

.child{
  flex: 0 1 32%;
  margin: 0 0.5%;
  background-color: red;
  height: 400px;
}
.child:nth-child(3n) {   flex-grow: 1;} /* fix as for comment */

here snippet:

 .parent{ display: flex; flex-direction: row; flex-wrap: wrap; align-content: stretch; justify-content: flex-start;; width: 100%; background-color: yellow; } .child{ flex: 0 1 32%; margin: 0 0.5%; background-color: red; height: 400px; } .child:nth-child(3n) { flex-grow: 1;}

 <div class="parent"> <div class="child"> Child 1 </div> <div class="child"> Child 2 </div> <div class="child"> Child 3 </div> <div class="child"> Child 4 </div> <div class="child"> Child 5 </div> <div class="child"> Child 6 </div> </div>

This link is helpful in order to get all possibilities.

Answer 5

.parent > div:last-child:nth-child(2) {
  margin:0 auto 0 30px;
 }

you can use nth-child also