web-dev-qa-db-fra.com

Comment obliger flexbox à inclure du padding dans les calculs?

Ci-dessous deux rangées.

  • Première ligne correspond à deux éléments à flex 1 et un à flex 2.

  • Deuxième ligne correspond à deux éléments à flex 1.

Selon la spécification 1A + 1B = 2A

Mais lorsque padding est inclus dans le calcul, la somme est incorrecte comme le montre l'exemple ci-dessous.

QUESTION

Comment faire en sorte que flex box inclue le rembourrage dans son calcul pour que les cases de l'exemple s'alignent correctement?

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}
<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

htmlcsscss3flexbox
23
DreamTeK

Comment obliger flexbox à inclure du padding dans les calculs?

Dans votre code, le remplissage {is _ inclus dans les calculs.

Selon la spécification 1A + 1B = 2A

Je ne crois pas que c'est correct. Peut-être fournir une référence de lien pour une explication.

La propriété flex-grow

Lorsque vous appliquez flex: 1 à un élément, vous utilisez la propriété abrégée flex pour dire ceci:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

flex-grow indique à un élément flex de consommer l'espace libre dans le conteneur.

Voici votre code:

.Item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 10px 10px 0;
}

Dans la première ligne, padding-right: 10px est appliqué aux éléments trois flex.

Dans la deuxième ligne, padding-right: 10px est appliqué à deux éléments flexibles.

Par conséquent, dans la première ligne, il y a 10px moins d'espace libre à distribuer. Cela rompt l'alignement de la grille.

Pour distribuer de l'espace (par exemple, vous voulez qu'un élément prenne la hauteur ou la largeur restante d'un conteneur), utilisez flex-grow.

Pour dimensionner avec précision un article flexible, utilisez flex-basis, width ou height.

Voici quelques informations supplémentaires:

4
Michael_B

Vous pouvez utiliser des pseudo-éléments flottants au lieu de padding, comme ceci: (Dans ce cas, un padding à droite de 30 pixels)

.Item:after {
  content: '';
  display: block;
  float: right;
  width: 30px;
  height: 100%;
}

0
sorioz