Вопросы Теги

Падение маржи во 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>

Как вы можете видеть, даже если поле 20px указано для article и main тегов, вы получите только 20px поле между последней статьей и нижним колонтитулом .

Однако, используя flexbox , мы получаем 40px поле между последним статьей и нижним колонтитулом - полное 20p x поле из от статьи к основному, и еще один 20px от основного до нижнего колонтитула . 

#container {
  display: flex;
  flex-direction: column;
}

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>

Есть ли способ заставить поля flexbox вести себя так же, как не флексбокс?

43
задан vsync 25 August 2018 в 13:18
поделиться