CODEWITHSUNDEEP
htmlcssflexbox
Boky
Boky

Reputation: 12064

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

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:

enter image description here

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

enter image description here

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

enter image description here

Upvotes: 1

Views: 3523

Answers (5)

Nethra
Nethra

Reputation: 609

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

you can use nth-child also

Upvotes: 0

A. Meshu
A. Meshu

Reputation: 4148

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.

Upvotes: 0

louie kim
louie kim

Reputation: 509

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/

Upvotes: 2

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9938

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>

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

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>

Upvotes: 1

Related Questions