CSS: элементы внизу родительского элемента

Question

Я могу переопределить align-items: flex-start с помощью align-self: flex-end для определенного элемента flex, есть ли способ переопределить justify-content для конкретный гибкий элемент?

У меня есть коробка с тремя дочерними элементами, и мне нужен последний элемент (item-3) внизу коробки (flex_wrapper)

нравится эта картинка:

Проверьте мой код, пожалуйста:

.item-1{
  background: red;
}

.item-2{
  background: blue;
}

.item-3{
  background: yellow;
}


.flex_wrapper{
  background: #ddd;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex_items{
  padding: 10px;
}

<div class="flex_wrapper">
    <div class="flex_items item-1">Item 01</div>
    <div class="flex_items item-2">Item 02</div>
    <div class="flex_items item-3">Item 03</div>
</div>

Примечание. Это возможно при использовании свойства margin или position, но я должен использовать flex-box.

Answer 1

Да, это на самом деле очень просто, просто укажите нужный элемент внизу margin-top:auto. Никакие обертки или дополнительные элементы не требуются.

.item-3{

  margin-top:auto;
}

.item-1 {
  background: red;
}

.item-2 {
  background: blue;
}

.item-3 {
  background: yellow;
  margin-top: auto;
}

.flex_wrapper {
  background: #ddd;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex_items {
  padding: 10px;
}

<div class="flex_wrapper">
  <div class="flex_items item-1">Item 01</div>
  <div class="flex_items item-2">Item 02</div>
  <div class="flex_items item-3">Item 03</div>
</div>

Answer 2

Вам нужно добавить невидимый элемент в промежутке с flex-grow: 1, чтобы занять место и сдвинуть ваш третий элемент вниз:

.item-1{
  background: red;
}

.item-2{
  background: blue;
}

.item-3{
  background: yellow;
}


.flex_wrapper{
  background: #ddd;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex_items{
  padding: 10px;
}

.separator {
  flex-grow: 1;
}

<div class="flex_wrapper">
    <div class="flex_items item-1">Item 01</div>
    <div class="flex_items item-2">Item 02</div>
    <div class="separator"></div>
    <div class="flex_items item-3">Item 03</div>
</div>