Flexbox - Распределить элементы в столбце

Question

У меня есть макет flexbox , например:

.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>

Я пытаюсь сделать так, чтобы в левом столбце было пространство между изображениями, чтобы верхнее изображение было выровнено сверху, а нижнее - снизу.

Я могу сделать это при использовании flex-direction: row, но не при использовании column.

Где я иду не так?

Answer 1

просто дать

.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>

Answer 2

Вы можете сделать это с помощью justify-content: space-between на .nested_left div , который разделит их настолько, насколько это возможно:

.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>

Следует отметить, что при использовании flex-direction: column основной основной *1015* и поперечный переключатель, которыйзатем свойство justify-content влияет на ось y .