web-dev-qa-db-fra.com

Réduction de la marge dans flexbox

Généralement, en CSS, lorsqu'un parent et son dernier enfant ont une marge, les marges se réduisent pour créer une seule marge. Par exemple.

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>

Comme vous pouvez le constater, même si une marge de 20px Est spécifiée à la fois sur les balises article et main, vous n’obtenez qu’une marge 20px Entre les balises. dernier article et footer.

Lors de l'utilisation de flexbox, cependant, nous obtenons une marge 40px Entre le dernier article et pied de page - un 20p x marge de l'article à main, et un autre 20px de main à pied de page.

#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>

Existe-t-il un moyen de faire en sorte que les marges flexbox se comportent de la même manière que celles qui ne le sont pas?

csscss3flexbox
38
Coffee Bite

La réduction de la marge est une caractéristique d'un contexte de formatage de bloc .

Aucune marge ne se réduit dans un contexte de formatage flex .

3. Conteneurs Flex: les flex et inline-flexdisplay valeurs

Un conteneur flex établit un nouveau contexte de formatage flexible pour son contenu. Cela revient à établir un contexte de formatage de bloc, sauf que flex layout est utilisé à la place de block layout. Par exemple, les objets flottants ne pénètrent pas dans le conteneur flexible et les marges de celui-ci ne s’effondrent pas avec les marges de son contenu.

57
Michael_B

REMARQUE: ce n'est pas une façon de faire en sorte que les marges se comportent de la même manière dans une disposition de boîte flexible que dans une disposition de bloc. Toutefois, cela peut aider à résoudre le problème de la marge dans certains cas.

Au lieu de réduire les marges, vous pouvez utiliser des pseudo-sélecteurs pour obtenir l'effet souhaité:

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>
1
Trevor