Elementi pseudo che infrangono il contenuto giustificato: spazio tra il layout della flexbox

Ho tre div all’interno di un div genitore che sono distanziati usando:

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

Tuttavia, il div padre ha un :after on that che sta facendo i tre div non uscire al limite del div del genitore. C’è un modo per far sì che la flexbox ignori il :before e :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; } 
 

Risposta breve

Nei CSS, non esiste attualmente un modo affidabile al 100% per impedire che gli pseudo-elementi influiscano sul justify-content: space-between calcolo e l’altro.

Spiegazione

::before e ::after pseudo elements su un contenitore flex diventano elementi flessibili.

Dalla specifica:

4. Articoli flessibili

Ogni bambino in stream di un contenitore flessibile diventa un object flessibile.

In altre parole, ogni bambino di un contenitore flessibile che si trova nel stream normale (cioè non posizionato in modo assoluto), è considerato un object flessibile.

La maggior parte, se non tutti, i browser interpretano questo per includere pseudo-elementi. The ::before pseudo è il primo object flessibile. L’articolo ::after è l’ultimo.

Ecco un’ulteriore conferma di questo comportamento di rendering dalla documentazione di Firefox:

In-flow ::after e ::before pseudo-elements sono ora elementi flessibili ( bug 867454 ).

Una ansible soluzione al tuo problema è rimuovere gli pseudo-elementi dal stream normale con posizionamento assoluto. Tuttavia, questo metodo potrebbe non funzionare in tutti i browser:

  • L’elemento flessibile posizionato in modo assoluto non viene rimosso dal stream normale in Firefox e IE11

Vedi la mia risposta qui per le illustrazioni di pseudo elementi che incasinano il justify-content :

  • justify-content: spazio tra il mancato allineamento degli elementi come previsto

Se si tratta di una proprietà ereditata, basta ignorarla

 .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; } 
 

Abbiamo annidato un altro div all’interno del div padre e dato tutto il codice flex in modo che gli pseudo-elementi non lo influenzino.

Se devi fare ciò, puoi sfruttare il comportamento del margine automatico sugli elementi flessibili. Dovresti anche azzerare il margine sinistro sul primo bambino flessibile e ugualmente il margine destro sull’ultimo bambino flessibile. Vedi i codici sotto.

Flexbox e margini automatici: https://www.w3.org/TR/css-flexbox-1/#auto-margins

Demo di 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; } }