Change giustificare di contenuti valore quando gli elementi di flessione traboccano contenitore

sguardo al seguente violino https://jsfiddle.net/27x7rvx6 Change giustificare di contenuti valore quando gli elementi di flessione traboccano contenitore

Il CSS (#test è contenitore FlexBox e .items sono i suoi figli):

#test { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: center; 
    width: 300px; 
    margin-left: 150px; 
    border: 2px solid red; 
} 
.item { 
    flex: 0 0 70px; 
    margin-right: 10px; 
    background: blue; 
    height: 70px; 
    border: 2px solid black; 
}

c'è una linea uno (nowrap) flexbox con elementi di dimensioni fisse. Il contenitore ha justify-content impostato su center. Perché gli oggetti non possono ridursi e sono insieme più larghi del contenitore che iniziano a traboccare.

Il mio problema è che il contenuto trabocca sia a sinistra che a destra. C'è un modo per rendere il contenuto giustificato al centro, ma una volta che inizia a traboccare farlo agire come la proprietà justify-content è impostata su flex-start, risp. farlo traboccare solo a destra del contenitore?

fonte

2015-12-09 Martin Kadlec

Nope .... francamente, non esiste un metodo (utilizzando FlexBox o meno) per fare questo così com'è. Il CSS non può rilevare un overflow del genere. Forse potresti fare qualcosa con un involucro aggiuntivo, ma sarebbe divertente. –

Sì, lo so che non esiste un modo diretto per farlo. Un modo per risolverlo se la flexbox non è necessaria è usare i blocchi in linea e l'allineamento del testo: centrato sul contenitore, tuttavia vorrei risolvere questo problema per il flexbox. –

justify-content non è l'approccio giusto al centro a causa del problema che descrivi.

Invece, mi raccomando auto margins. È possibile utilizzarli al centro:

Prima di allineamento tramite justify-content e align-self, qualsiasi spazio libero positiva viene distribuita ai margini di auto in quel dimensione.

e si comportano come si desidera con overflow:

scatole Traboccante ignorare i loro margini di auto e di overflow nella direzione end .

Ad esempio, è possibile impostare margin-left: auto al primo elemento flessibile e margin-right: auto per l'ultimo, o inserire ::before e ::after pseudo-elementi.

.test { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    width: 200px; 
 
    border: 2px solid red; 
 
    margin: 10px; 
 
} 
 
.wide.test { 
 
    width: 500px; 
 
} 
 
.test::before, .test::after { 
 
    content: ''; /* Insert pseudo-element */ 
 
    margin: auto; /* Make it push flex items to the center */ 
 
} 
 
.item { 
 
    flex: 0 0 50px; 
 
    margin-right: 10px; 
 
    background: blue; 
 
    height: 50px; 
 
    border: 2px solid black; 
 
}

<div class="test"> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
</div> 
 
<div class="wide test"> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
</div>

fonte

2015-12-24 16:04:15 Oriol

ok, ma non funziona in verticale, non è vero? –

Change giustificare di contenuti valore quando gli elementi di flessione traboccano contenitore

risposta

Problemi correlati