Несколько элементов сверху, один снизу на flexbox?

Question

[Zuckerberg]

Возможно ли чисто на flexbox, без дополнительных манипуляций сделать так:



Заготовка: https://jsfiddle.net/120Lcg7m/

Answer 1

[BigSmoke]

<div class="wrap">
  <div class="box box-1">1</div>
  <div class="box box-2">2</div>
  <div class="box box-3">3</div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.box {
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background-color: green;
}

.box-3 {
  margin-top: auto;
}

Answer 2

[Владислав Лысков]

https://jsfiddle.net/t7e6p0yz/

Comments

[Zuckerberg]

Владислав Лысков, как вариант, тоже так думал ) Мне интересно, без дополнительных оберток на одном флексбокс можно такое реализовать или всё же нет?