Спасибо большое @Michael_B :-) понял!

у в этом примере.main элемент (синий) разделяющий пространство только с.aside-1 (желтый) и.aside-2 (розовый) и не со всеми элементами?

У нас есть обертка, которая помещает все элементы в одну строку.

В.main мы говоримflex: 3 0pxЯ думаю, что этот элемент будет в 3 раза больше остальных четырех элементов и будет занимать 3 / (3 + 1 + 1 + 1 + 1).

Тем не менее, я заметил, что сnowrap Обертка самый маленький предмет.main.

И сwrap, он делится с двумя ближайшими элементами.

Не могу этого понять.

.wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper>* {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
  height: 50vh;
  flex: 3 0px;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

.aside {
  flex: 1 auto;
}

.aside-1 {
  order: 1;
}

.main {
  order: 2;
}

.aside-2 {
  order: 3;
}

.footer {
  order: 4;
}
<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

Ответы на вопрос(1)

Ваш ответ на вопрос