How to distribute blocks in a flex container?

Question

css

Good afternoon!
It is necessary to distribute 3 blocks in flexbox: the
first and third in size, the middle one occupies all the remaining space
Between the blocks, the indent specified in pixels!
help

Answer 1

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

Answer 2

Add flex-grow: 1 to the middle, flex-grow: 0 to the rest (or don't set, default is 0)

Answer 3

.box {
  flex: 0 0 auto;
}

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

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