Corso di CSS / Allineamento Flexbox, ritorno a capo, gap, grow e shrink

Flexbox combina allineamento, wrapping e dimensionamento flessibile per adattare gli elementi allo spazio disponibile. justify-content funziona lungo l'asse principale, align-items agisce sull’asse trasversale e align-content distribuisce più righe quando c'è spazio sull'asse trasversale da distribuire.

Abbina le proprietà di allineamento ai loro assi

In una riga, justify-content controlla principalmente l'orizzontale, e align-items controlla principalmente il verticale. Se lo cambi in colonna, l'asse principale diventa verticale e la direzione fisica delle due proprietà cambia anch'essa. In particolare, deve esserci spazio lasciato nell'altezza del contenitore per confrontare il justify-content delle colonne. Se l'altezza si adatta perfettamente al contenuto, non c’è quasi spazio per muoversi anche se cambi a center o space-between. La direzione dell'asse e l'impostazione iniziale del contenitore Flex possono essere controllate in Basi di Flexbox: contenitori, elementi e assi.

justify-content: center posiziona un gruppo di elementi al centro, mentre space-between posiziona il primo e l'ultimo elemento alle estremità e divide lo spazio tra di essi. gap è lo spazio specificato, e space-between distribuisce lo spazio rimanente. Quando usati insieme, il gap effettivo può essere maggiore del gap specificato. Se il flex-grow di un elemento utilizza tutto lo spazio rimanente o il margine auto nella direzione dell'asse principale occupa spazio, la modifica di justify-content potrebbe non essere visibile.

align-items: center allinea gli elementi di altezze diverse al centro all'interno di una riga. align-content: center centra tutte le righe sull'asse trasversale. Non dovresti considerare i due come la stessa funzione. align-content non ha effetto sui contenitori a riga singola che sono nowrap, e anche nei contenitori a più righe, se la dimensione occupata dalle righe e l'altezza del contenitore sono uguali, non c'è spazio per il confronto. Puoi controllare le condizioni di applicazione nella guida all'allineamento di Flexbox di MDN.

Confronta l'allineamento degli elementi e l'allineamento delle righe

Salva il codice qui sotto come flex-align.html e aprilo. La prima sezione contiene tre elementi di altezze diverse, la seconda sezione contiene quattro elementi disposti su due righe. Nella seconda sezione, ho impostato l'altezza a 280px per fare spazio al movimento del gruppo.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-align.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.toolbar { display: flex; gap: 12px; justify-content: space-between; align-items: center;
 width: 100%; max-width: 640px; min-height: 120px; border: 2px solid #789; padding: 12px; }
 .toolbar > div { padding: 8px; background: #dceefa; }
 .lines { display: flex; flex-wrap: wrap; gap: 12px; width: min(100%, 360px); height: 280px;
 align-items: center; align-content: flex-start; border: 2px solid #789; padding: 12px; }
 .lines > div { flex: 0 0 140px; padding: 8px; background: #e8f5de; }
 .tall { min-height: 60px; }
  </style>
</head>
<body>
<h1>Alignment on one line and multiple lines</h1>
<h2>Toolbar</h2><div class="toolbar"><div>Short item</div><div>Two-line item<br>Second line</div><div>Button position</div></div>
<h2>Line group</h2><div class="lines"><div>1</div><div class="tall">2<br>Second line</div><div>3</div><div class="tall">4<br>Second line</div></div>
</body>
</html>

1. Cambia il justify-content di .toolbar in center per vedere se i tre elementi si centrano. Confrontiamo anche con flex-start e poi lo riportiamo a space-between. Lascia la dimensione degli elementi e lo spazio invariati.
2. Cambia align-items in .toolbar in flex-start per assicurarti che si allinei in alto. Se lo cambi in stretch, gli elementi con dimensione automatica sull'asse trasversale aumenteranno. Dopo il confronto, viene riportato a center.
3. Modifica solo l'align-content di .lines su center. Il gruppo delle due righe scende mantenendo le relazioni tra gli elementi di ciascuna riga. Se torni a flex-start e modifichi solo align-items su flex-start, la posizione degli elementi corti in ogni riga cambierà.
4. Se cambi solo il flex-wrap in .lines su nowrap, tutto cercherà di rimanere su una sola riga, e in questo esempio la riduzione è disabilitata da flex-shrink: 0, causando un overflow orizzontale. In questo stato, non puoi allineare più righe con align-content. Dopo la conferma, ripristinalo su wrap.

Comprendere grow, shrink e basis

flex: 1 1 192px è crescita, riduzione e base in quest'ordine. La base è la dimensione standard da cui iniziare la distribuzione spaziale dell'asse principale e non è un valore che garantisce la larghezza finale. La crescita è il rapporto di ingrandimento per lo spazio rimanente, e la riduzione è il rapporto di riduzione quando lo spazio è insufficiente. Poiché esiste una regola di omissione dei valori per numeri singoli o auto nello shorthand, vengono specificati tre valori e confrontati nell'esempio di apprendimento.

Ad esempio, se un genitore con una larghezza del contenuto di 640px contiene tre elementi di dimensione base 100px e due gap (ognuno di 20px), lo spazio rimanente è 640 − 300 − 40 = 300px. Se il rapporto di crescita è 1:2:1, lo spazio aggiunto sarà 75px, 150px e 75px, e la larghezza finale sarà 175px, 250px e 175px. Questo è un calcolo delle condizioni che non coinvolgono la dimensione minima del contenuto o vincoli min/max.

La quantità di restringimento non è distribuita uniformemente basandosi solo sul numero di restringimento. Considera sia il rapporto di riduzione sia la dimensione di riferimento. Se dobbiamo ridurre di 60px due elementi con dimensioni standard di 200px e 100px ed entrambi hanno un restringimento di 1, allora in condizioni semplici senza vincoli, ridurremmo rispettivamente di 40px e 20px. I risultati possono variare se ci sono padding, bordi, dimensioni minime del contenuto, ecc., quindi dovresti effettivamente controllare i valori applicati. La descrizione del flex di MDN spiega la notazione abbreviata e le condizioni di dimensione.

Distribuire lo spazio e mandare le schede a capo

Salva il seguente codice come flex-size.html. L'area di calcolo corrisponde al calcolo sopra creando una larghezza massima di 640px senza alcun padding o bordo aggiuntivo. La lista di schede utilizza una larghezza di 192px come standard per le interruzioni di linea, ma riempie lo spazio rimanente. Se una lista con list-style: none si trova al di fuori di nav, potrebbe non essere riconosciuta come lista nell'albero di accessibilità di Safari. Nell'esempio, ul specifica role="list" per definire il ruolo della lista. Le condizioni di accessibilità quando si rimuovono i punti elenco e gli spazi sono descritte anche in Stile dei paragrafi e degli elenchi CSS.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-size.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.calc { display: flex; gap: 20px; width: min(100%, 640px); background: #eef2f6; }
 .calc > div { flex: 1 1 100px; min-width: 0; height: 80px; background: #dceefa; }
 .calc > div:nth-child(2) { flex-grow: 2; }
 .cards { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; }
 .cards > li { flex: 1 1 192px; min-width: 0; padding: 16px; background: #e8f5de; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Flex values ​​and space distribution</h1><div class="calc"><div>grow 1</div><div>grow 2</div><div>grow 1</div></div>
<h2>Wrapping card</h2><ul class="cards" role="list"><li>First card</li><li>Second card</li><li>Third card</li><li>Fourth card</li></ul>
</body>
</html>

1. Espandi il tuo browser in modo che il .calc sia largo 640px e usa gli Strumenti per Sviluppatori per controllare le larghezze dei tre elementi. Saranno 175px·250px·175px. Se cambi solo il grow del secondo elemento a 1, i tre elementi diventeranno ciascuno 200px. Dopo il confronto, ripristina a 2.
2. Cambia semplicemente il grow in .cards > li a 0 per assicurarti che l'ultima riga di schede non occupi la larghezza extra. Se lo ripristini a 1, anche l'ultima riga riceverà spazio.
3. Rimpicciolisci lo schermo per vedere se meno schede entrano in una riga. wrap determina quali righe posizionare, e ogni riga distribuisce lo spazio rimanente separatamente. Le larghezze delle schede dell'ultima riga e della riga precedente non coincidono necessariamente.
4. Per vedere un singolo overflow di riga invece di un'interruzione di riga, imposta flex-wrap: nowrap sul contenitore .cards e flex: 0 0 192px sugli elementi .cards > li. Dopo aver verificato le due condizioni, ripristinare il wrap originale e 1 1 192px.

Verificare la dimensione minima automatica e il testo lungo

La larghezza minima automatica degli elementi Flex può impedire che aree contenenti indirizzi o identificatori lunghi vengano accorciate. Overflow CSS, testo lungo a capo e puntini di sospensione spiega questi problemi. La dichiarazione min-width: 0 permette al box di ridursi, e overflow-wrap: anywhere permette di andare a capo nella stringa stessa. Ridurre una casella non tronca automaticamente il testo al suo interno, quindi è necessario distinguere tra i due problemi.

Salva il codice sottostante come flex-long-text.html. Ho inserito un identificatore lungo senza spazi, non un indirizzo reale. Anche se lo schermo è ristretto, il testo accanto all'area di guida viene letto suddiviso su più righe. Puoi controllare le regole di a capo nel punto overflow-wrap della documentazione MDN.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-long-text.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.notice { display: flex; gap: 12px; max-width: 600px; border: 2px solid #789; padding: 12px; }
 .icon { flex: 0 0 48px; background: #ffe4b5; }
 .text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; background: #dceefa; }
 .text p { margin: 0; }
  </style>
</head>
<body>
<h1>Long strings and minimum sizes</h1><div class="notice"><div class="icon">Notice</div><div class="text"><p>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p></div></div>
</body>
</html>

1. In .text, basta cambiare overflow-wrap in normal. Anche se la larghezza dell'elemento viene ridotta, la stringa potrebbe fuoriuscire dai limiti. Ripristina anywhere.
2. Per vedere separatamente l'impatto di min-width, rimuovi min-width: 0 mantenendo overflow-wrap: normal. Dopo aver determinato come la dimensione minima delle stringhe lunghe influisce sul posizionamento degli elementi, ripristiniamo entrambe le dichiarazioni ai valori originali.

Se l'allineamento non è possibile, controlla prima l'asse del genitore e lo spazio rimanente. Se la dimensione non diminuisce, controlla la dimensione minima dell'elemento e la stringa interna. Se metti overflow: hidden sull'intero genitore per nascondere il problema, potresti perdere contenuto o indicazione del focus. È più facile giudicare i risultati se la dimensione del layout e la visualizzazione del contenuto sono risolte separatamente.