container Costruttore shrink-to-fit elementi figlio come si avvolgono

Question

che sto cercando di capire come funziona Flexbox (dovrebbe funzionare ...?) Per casi come di seguito:

.holder { 
 
    width: 500px; 
 
    background: lightgray; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    flex-wrap: nowrap; 
 
} 
 
.v2 { 
 
    width: 320px; 
 
} 
 
.child { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    padding: 30px 0px; 
 
    text-align: center; 
 
}

<div class="holder"> 
 
    <div class="child">At a glance</div> 
 
    <div class="child">After coverage ends</div> 
 
    <div class="child">Forms &amp; documents</div> 
 
</div> 
 
<br> 
 
<br> 
 
<div class="holder v2"> 
 
    <div class="child">At a glance</div> 
 
    <div class="child">After coverage ends</div> 
 
    <div class="child">Forms &amp; documents</div> 
 
</div> 
 
<br> 
 
<br> 
 
<div class="holder v2"> 
 
    <div class="child">At a 
 
    <br>glance</div> 
 
    <div class="child">After coverage 
 
    <br>ends</div> 
 
    <div class="child">Forms &amp; 
 
    <br>documents</div> 
 
</div>

JSFiddle here

Il problema è che quando c'è abbastanza spazio per adattarsi agli elementi, sto diventando un bel bambino attillato, con una spaziatura uniforme. (in primo luogo, blocco in alto)

Tuttavia, quando non c'è abbastanza spazio e testo all'interno dei bambini inizia il wrapping, tutto va in una direzione strana - i bambini non sono più strettamente in forma, e anche se dopo il confezionamento, c'è abbastanza spazio attorno ai bambini flessibili, perché non ci sono più in forma, lo spazio intorno non ha davvero la possibilità di funzionare altrettanto bene (secondo blocco div)

Tuttavia, se aggiungo interruzioni di riga manuali nei punti in cui la linea automatica si verificano interruzioni, tutto viene definito come "dovrebbe" ... (in basso, terzo blocco)

Quello che mi piacerebbe è avere sempre i bambini ben vestiti all'interno delle loro scatole (bordi neri), e atever spazio è lasciato, sarebbe distribuito equamente tra di loro, senza di me dover aggiungere interruzioni di linea manuale (che non è un'opzione nel mio caso)

E 'possibile a tutti? ...

Answer 1

In CSS, il contenitore padre non sa quando i suoi figli si avvolgono. Quindi, continua a ridimensionare le sue dimensioni dimenticando ciò che sta accadendo all'interno.

In altre parole, il browser esegue il rendering del contenitore nella cascata iniziale. Non riflette il documento quando si avvolge un bambino.

Ecco perché il contenitore non si restringe - avvolge il layout più stretto. Continua come se nulla fosse avvolto, come dimostra lo spazio riservato sulla destra.

La lunghezza massima dello spazio bianco orizzontale è la lunghezza dell'elemento o degli elementi che il contenitore si aspettava di trovarvi.

Nel seguente demo, gli spazi bianchi può essere visto andare e venire come la finestra viene ridimensionata in orizzontale: DEMO

Avrete bisogno di una soluzione di JavaScript (vedi here e here) ... o media query CSS (vedi here).

In alcuni casi, quando si ha a che fare con il testo a capo, text-align: right sul contenitore.

Answer 2

Il motivo per cui i blocchi comportarsi in questo modo è a causa del rendering CSS.

Nel primo caso, il browser non sa quando il blocco diventa troppo piccolo per il suo contenuto. Quindi mantiene lo stretching fino a raggiungere il massimo e quindi esegue il rendering del testo.

Nel tuo ultimo caso devi dire al browser dove interrompere in modo che sappia che l'elemento non dovrebbe allargarsi.

L'unico modo per risolvere facilmente questo è impostare le interruzioni da soli.

Answer 3

avere una buona occhiata al mio Fiddle in cui ho cambiato:

• .holderwidth al max-width (in .v classi)
• modificato .holder-wrap e space-around suoi figli
• aggiunto 2 altro .v classi per chiarezza
• rimosso il <br>'s
• e, soprattutto , aggiunte flex: 0 0 a .child

Flexbox deve quasi sempre max-width da impostare, che è più flessibile rispetto width. A seconda di come è necessario il .child ren per comportarsi, modificare il flex-grow e flex-shrink in flex: 0 0 per soddisfare le vostre esigenze. (Il risultato di sembra troppo bello)

... no JavaScript necessario ...

UPDATE Il Codrops Flexbox Reference mi ha davvero un sacco capire FBL ha aiutato ...