Pourquoi les éléments flexibles ignorent-ils les marges et la taille des boîtes : un problème de bordure ?

Éléments flexibles ne respectant pas les marges et le dimensionnement de la boîte : border-box

En CSS, la propriété box-sizing détermine la façon dont la largeur et la hauteur d'un élément sont calculées, y compris tout remplissage ou bordures. Lorsqu'il est défini sur border-box, les dimensions de l'élément incluent à la fois le remplissage et les bordures. Cependant, les marges sont toujours calculées séparément, quelle que soit la propriété de dimensionnement de la boîte.

Lors de l'utilisation de Flexbox, définir flex sur 1 1 33,33 % avec margin : 10px génère un comportement inattendu. Bien que Flexbox répartisse généralement l'espace disponible de manière égale entre les éléments, les marges ne sont pas prises en compte dans ce scénario. Par conséquent, les trois éléments attendus par ligne ne sont pas atteints.

Pour résoudre ce problème, la propriété flex-basis peut être ajustée. Dans l'exemple fourni, flex-basis est défini sur 26 %, ce qui correspond à la largeur souhaitée de chaque élément moins la marge. En garantissant que la marge n'est pas prise en compte dans la base flexible, Flexbox aligne correctement les éléments et les emballe comme prévu.

<code class="css">.horizontal-layout {
  display: flex;
  width: 400px;
}

header > span { 
  flex: 1 0 26%;                    /* ADJUSTED */
  margin: 10px;
}

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 0 26%;                   /* ADJUSTED */
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!