Как распределить блоки в флекс-контейнере?

Question

[Александр Рыбаков]

Добрый день!
Надо распределить в флексбоксе 3 блока:
первый и третий по размеру, средний занимает все оставшееся место
Между блоками заданный в пикселях отступ!
хелп

Answer 1

[Вадим Кот]

https://codepen.io/anon/pen/jKKmWB

Answer 2

[SagePtr]

Среднему добавить flex-grow: 1, остальным flex-grow: 0 (или не задавать, по умолчанию 0)

Answer 3

[monochromer]

.box {
  flex: 0 0 auto;
}

  .box:nth-child(2) {
    flex: 1 1 0%;
  }

  .box + .box {
    margin-left: 1rem;
  }