first

by Dmitry Morar

HTML

<div class="flex-container">
  <div class="flex-item one">Первый</div>
  <div class="flex-item two">Второй</div>
  <div class="flex-item three">Третий</div>
</div>

CSS

.flex-container {
  display: flex;
  height: 300px;
  color: #fff;
  font-size: 2.6em;
  flex-flow: column wrap;
}

.flex-item {
  display: flex;
  /* Флексы */
  align-items: center;
  /* Выравнивание текста по вертикали */
  justify-content: center;
  /* Выравнивание текста по горизонтали */
}

.one {
  background: #508694;
  /* Цвет фона */
  /* margin-right: 10px; */
  /* Отступ справа */
  /* flex-basis: 100%; */
  flex-grow: 1;
  order: 1;
  /* Первый блок */
}

.two {
  background: #BB844C;
  /* Цвет фона */
  /* margin-bottom: 10px; */
  /* Отступ снизу */
  /* flex: 1 1 0; */
  flex-grow: 1;
  /* flex-shrink: 1; */
  /* flex-basis: 0; */
  order: 2;
  /* Второй блок */
}

.three {
  background: #929D79;
  /* Цвет фона */
  /* flex-grow: 1; */
  flex-basis: 100%;
  /* flex-shrink: 1; */
  /* flex-basis: 0; */
  /* flex: 1 1 0; */
  order: 3;
  /* Третий блок */
}