Маржа, рушившаяся в flexbox

Как правило, в CSS, когда родитель и его последний дочерний элемент имеют поле, поля сжимаются, создавая единое поле. Например

article {
  margin-bottom: 20px
}

main {
  background: pink;
  margin-bottom: 20px;
}

footer {
  background: skyblue;
}

<div id="container">
  <main>
    <article>
      Item 1
    </article>
    <article>
      Item 2
    </article>
  </main>
  <footer>Footer</footer>
</div>

Ответ 1

Коллапсирование полей является особенностью контекста форматирования блоков.

В контексте flex форматирования нет разметки.

3. Контейнеры Flex: flex и inline-flex displayзначения

Контейнер flex устанавливает новый контекст форматирования гибкости для своего содержание. Это то же самое, что и создание контекста форматирования блоков, за исключением того, что вместо макета блока используется гибкая макет. Например, поплавки не вторгаются в контейнер для гибки, а гибкость поля контейнеров не сбрасываются с полями его содержимого.

Ответ 2

ПРИМЕЧАНИЕ. Это не способ заставить поля работать в макете гибкого блока так же, как в макете блока; однако в некоторых случаях это может помочь решить проблему маржи.

Вместо того чтобы полагаться на сворачивающиеся поля, вы можете использовать псевдо-селекторы, чтобы получить желаемый эффект:

main{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

article{
  margin-bottom: 20px;
  background: #eee;
}

article:last-child{
  margin-bottom: 0;
}

footer{
  background: #eef;
}

<main>
  <article>
    This is article number 1
  </article>
  <article>
    This is article number 2
  </article>
  <article>
    This is article number 3
  </article>
</main>
<footer>
  This is the footer of the page
</footer>