web-dev-qa-db-fra.com

Pseudo-éléments cassant le contenu justifié: espace dans la structure de la flexbox

J'ai trois divs dans un div parent qui sont espacés en utilisant:

display: flex;
justify-content: space-between;

Cependant, le div parent a un :after qui fait que les trois div ne vont pas au Edge du div parent. Existe-t-il un moyen de faire en sorte que flexbox ignore les :before et :after?

codepen.io

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 300px;
  }
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

htmlcsscss3flexboxpseudo-element
13
Landon Call

Réponse courte

En CSS, il n'existe actuellement aucun moyen fiable à 100% d'empêcher les pseudo-éléments d'avoir un impact sur le calcul de justify-content: space-between.

Explication

Les pseudo-éléments ::before et ::after d'un conteneur flex deviennent des éléments flex.

De la spécification:

4. Éléments Flex

Chaque enfant entrant dans un conteneur flexible devient un élément flexible.

En d’autres termes, chaque enfant d’un conteneur flexible qui se trouve dans le flux normal (c’est-à-dire qui n’est pas positionné de manière absolue) est considéré comme un élément flexible.

La plupart des navigateurs, sinon tous, interprètent cela comme incluant des pseudo-éléments. Le pseudo ::before est le premier élément flexible. L'item ::after est le dernier.

Voici une confirmation supplémentaire de ce comportement de rendu dans la documentation de Firefox:

Les pseudo-éléments ::after et ::before en circulation sont maintenant flex articles ( bug 867454 ).

Une solution possible à votre problème consiste à supprimer les pseudo-éléments du flux normal avec positionnement absolu. Cependant, cette méthode peut ne pas fonctionner dans tous les navigateurs:

Voir ma réponse ici pour des illustrations de pseudo-éléments qui dérangent justify-content:

15
Michael_B

S'il s'agit d'une propriété héritée, remplacez-la simplement

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 100px;
}

/* definitions from a framework */
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }

/* definitions override */
.container.flexcontainer:before, 
.container.flexcontainer:after {
   display: none;  
}
<div class="container flexcontainer">
  <div></div>
  <div></div>
  <div></div>
</div>

4
vals

A imbriqué une autre div à l'intérieur de la div parente et lui a donné tout le code flexible pour que les pseudo-éléments ne l'affectent pas.

1
Landon Call

Si vous devez le faire, vous pouvez tirer parti du comportement de marge automatique sur les éléments flexibles. Vous devez également mettre à zéro la marge gauche sur le premier enfant flexible et également la marge droite sur le dernier enfant flexible. Voir le code ci-dessous.

Flexbox & auto marges: https://www.w3.org/TR/css-flexbox-1/#auto-margins

Démo de Codepen: http://codepen.io/anderskleve/pen/EWvxqm

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;

  div {
    background: red;
    height: 245px;
    width: 300px;
    margin: 0 auto;
  }

  div:first-child {
    margin-left: 0;
  }

  div:last-child {
    margin-right: 0;
  }

  &:before {
    content:'';
    display: table;
  }

  &:after {
    clear: both;
    content: '';
    display: table;
  }
}
0
anderskleve