CODEWITHSUNDEEP
htmlcssflexbox
fightstarr20
fightstarr20

Reputation: 12578

Flexbox - Distribute items in column

I have a flexbox layout like this:

.container {
  display: flex;
  flex-direction: row;
}

.item1, .item2 {
  border: 1px solid black;
}

.nested_left {
  display: flex;
  flex-direction: column;
  border: 2px solid green;
}

.nested_right {
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}
<div class="container">
  <div class="nested_left">
    <div class="item1">
      <img src="https://placeimg.com/240/180/any" alt="">
    </div>
    <div class="item1">
      <img src="https://placeimg.com/240/180/any" alt="">
    </div>
  </div>
  <div class="nested_right">
    <img src="https://placeimg.com/640/480/any" alt="">
  </div>
</div>

I am trying to make the left column have space in between the images so that the top image is aligned at the top, and the bottom one at the bottom.

I can do this when using flex-direction: row but not when I am using column.

Where am I going wrong?

Upvotes: 1

Views: 671

Answers (2)

VXp
VXp

Reputation: 12058

You can do it with the justify-content: space-between on the .nested_left div, which will put them apart as much as it can:

.container {
  display: flex;
  /*flex-direction: row; by default*/
}
 
.item1, .item2 {
  border: 1px solid black;
}
 
.nested_left {
  display: flex;
  flex-direction: column;
  border: 2px solid green;
  justify-content: space-between;
}
 
img {display: block} /* to remove bottom margin/whitespace */
 
.nested_right {
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}
<div class="container">
  <div class="nested_left">
    <div class="item1">
      <img src="https://placeimg.com/240/180/any" alt="">
    </div>
    <div class="item1">
      <img src="https://placeimg.com/240/180/any" alt="">
    </div>
  </div>
  <div class="nested_right">
    <img src="https://placeimg.com/640/480/any" alt="">
  </div>
</div>

It's worth to mention that when using flex-direction: column, the main and cross-axis switch, which then makes the justify-content property affect the y-axis.

Upvotes: 1

Adel Elkhodary
Adel Elkhodary

Reputation: 1647

just give 

.nested-left { 
   justify-content: space-between; 
}


 .container {
   display:flex;
   flex-direction:row;
 }
 
 .item1,.item2{
   border:1px solid black;
 }
 
 .nested_left {
   display:flex;
   flex-direction:column;
    border:2px solid green;
    justify-content: space-between;
 }
 .nested_right {
   display:flex;
   flex-direction:column;
   border:2px solid red;
 }
<div class="container">
  <div class="nested_left">
    <div class="item1">
      <img src="https://placeimg.com/240/180/any">
    </div>
    <div class="item1">
      <img src="https://placeimg.com/240/180/any">
    </div>
  </div>
  <div class="nested_right">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

Upvotes: 0

Related Questions