Corso di CSS / Basi di Flexbox: contenitori, elementi e assi

Flexbox dispone gli elementi figli diretti di un contenitore lungo un asse principale e distribuisce lo spazio lungo quell'asse. flex-direction sceglie la direzione dell'asse principale, mentre l'asse trasversale è perpendicolare ad esso; row non è universalmente sinonimo di orizzontale.

Scegli un contenitore Flexbox e i suoi elementi

Flexbox è adatto a relazioni unidimensionali come gli elementi di navigazione, un campo di ricerca accanto a un pulsante o un'icona accanto a una descrizione. Spaziarli con spazi bianchi ripetuti o elementi posizionati indipendentemente è fragile poiché il contenuto e la larghezza disponibile cambiano. Flexbox distribuisce lo spazio disponibile di un contenitore tra i suoi figli diretti.

Se hai bisogno di una griglia che allinei costantemente righe e colonne allo stesso tempo, consulta Grid. Flexbox può anche essere suddiviso in più righe, ma ogni riga distribuisce lo spazio separatamente, quindi le colonne nella prima riga non corrispondono sempre alle colonne nella seconda riga. Una grande area della pagina può essere utilizzata insieme come una Grid, e una raccolta di pulsanti al suo interno può essere utilizzata insieme come un Flexbox. Per allineare più righe e colonne insieme, confronta Basi di CSS Grid: tracce, linee e posizionamento che crea righe e colonne insieme.

.menu {
  display: flex;
  gap: 12px;
}

Questa dichiarazione non è un comando per ordinare .menu stesso all'interno del suo genitore. Questo è un comando per disporre i figli diretti in .menu. Ad esempio, se hai due div all'interno di un .menu e due span all'interno del primo div, gli elementi flex sono i due div. Se vuoi disporre gli span in orizzontale, devi anche specificare un display: flex separato in quel div.

Identifica gli assi principale e trasversale

L'asse principale è la direzione in cui sono elencati gli elementi Flex, e l'asse trasversale è la direzione perpendicolare all'asse principale. Piuttosto che memorizzare quale proprietà controlla la larghezza o l'altezza, devi capire quale asse la controlla in modo da poterla allineare correttamente anche quando la cambi in colonna.

Le indicazioni in questa tabella presumono writing-mode: horizontal-tb e direction: ltr. Nella scrittura da destra a sinistra o verticale, le direzioni fisiche cambiano. row segue la direzione in linea, quindi non inizia sempre a sinistra. Per ulteriori dettagli, consulta MDN: concetti di base di Flexbox .

Comprendere il comportamento iniziale di Flexbox

Se non viene specificato un valore separato, la direzione è row e il ritorno a capo è disabilitato da nowrap. Gli elementi sono raggruppati all'inizio dell'asse principale e non si espandono automaticamente lungo l'asse principale per riempire lo spazio extra. Possono restringersi se lo spazio è insufficiente, ma se non possono restringersi sufficientemente a causa della dimensione minima del contenuto o dei vincoli specificati, possono traboccare oltre il contenitore principale. Il controllo dettagliato dell'allineamento, delle interruzioni di riga e delle dimensioni degli elementi sarà continuato in Allineamento Flexbox, ritorno a capo, gap, grow e shrink.

Sugli assi trasversali, l'allungamento è il comportamento di allineamento predefinito. Gli elementi con altezza automatica in una riga di solito riempiono la stessa altezza della riga. Ecco perché le schede con descrizioni brevi appaiono della stessa altezza delle schede con descrizioni lunghe. Non dare per scontato che gli elementi che hanno già un'altezza chiara o margini automatici si allarghino automaticamente. Nella colonna, l'asse trasversale è orizzontale, quindi la larghezza sembra aumentare.

Il ridimensionamento iniziale di un elemento può essere inteso come flex: 0 1 auto. 0 significa non ingrandire occupando lo spazio rimanente, 1 significa partecipare alla riduzione nello spazio insufficiente, e auto significa prendere come base la specifica delle dimensioni e il contenuto dell'asse principale corrispondente. In questa fase, vengono prima controllati la direzione di posizionamento e le operazioni di base, mentre la pratica di regolazione del rapporto e delle interruzioni di linea è trattata in dettaglio nella lezione sull'allineamento e sulla regolazione delle dimensioni.

Confronta il flusso normale e le direzioni di Flexbox

Salva il codice sottostante come file UTF-8 flex-direction.html e aprilo nel tuo browser. Non sono richieste librerie separate. Tutti i collegamenti sono scritti nell'ordine di primo, secondo, terzo, e solo il CSS è diverso. La sezione layout generale specifica i collegamenti come blocchi e li mostra riga per riga.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-direction.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; }
.demo { border: 2px dashed #789; padding: 12px; margin-bottom: 20px; }
 .demo > a, .nested > div { padding: 12px; background: #dceefa; }
 .normal > a { display: block; margin-bottom: 8px; }
 .row, .column, .reverse, .nested { display: flex; gap: 12px; }
 .column { flex-direction: column; }
 .reverse { flex-direction: row-reverse; }
 .nested > div { flex: 1; min-width: 0; }
 .nested span { display: block; }
 .initial { display: flex; gap: 12px; border: 2px dashed #789; }
 .initial > div { width: 180px; min-width: 0; padding: 12px; background: #e8f5de; }
  </style>
</head>
<body>
<h1>Same HTML order, different placement</h1>
<h2>Normal block flow</h2><div class="demo normal"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row</h2><div class="demo row"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>column</h2><div class="demo column"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row-reverse</h2><div class="demo reverse"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>Direct and nested children</h2><div class="demo nested"><div><span>First line of box A</span><span>Second line of box A</span></div><div>Box B</div></div>
<h2>Initial size and growth</h2><div class="initial"><div>Short description</div><div>Two-line description<br>Second line</div><div>Three-line description<br>Second line<br>Third line</div></div>
<p id="result">This is the link destination. Use the links above to check keyboard navigation order.</p>
</body>
</html>

1. Nella sezione riga, assicurati che i tre elementi siano sulla stessa linea. Basta aggiungere flex-direction: column a .row per cambiarla in verticale. Dopo la conferma, rimuovi la dichiarazione e torna alla riga originale.
2. Nota come i collegamenti nella sezione colonna si allargano orizzontalmente. Aggiungere align-items: flex-start a .column rende il collegamento più vicino alla larghezza del contenuto. Questo perché l'asse trasversale della colonna è orizzontale. Dopo il confronto, rimuovi la dichiarazione aggiunta.
3. Nella sezione row-reverse, il link First appare a destra, ma rimane il primo nell’HTML. Premi il tasto Tab per assicurarti di spostarti da primo → secondo → terzo. Non modificare l'ordine di lettura importante solo con il reverse, perché l’ordine visivo può non coincidere con quello di lettura e di navigazione da tastiera.
4. Nelle sezioni figlio annidate, solo i grandi riquadri A e B sono affiancati. I due span in A sono verticali. Se aggiungi display: flex alla regola .nested > div, cambia anche la disposizione interna dei due span. Rimuovi la dichiarazione aggiunta dopo aver controllato.
5. Nell'ultima sezione, assicurati che le tre schede abbiano la stessa altezza e, sugli schermi larghi, che ogni scheda non occupi l'intera larghezza rimanente. Restringendo lo schermo, la larghezza della scheda si riduce senza andare a capo. Se aggiungi flex-shrink: 0 al .initial > div, non si ridurrà, causando uno scorrimento orizzontale. Rimuovi la dichiarazione aggiunta dopo aver verificato.

Diagnostica risultati di layout inaspettati

Negli strumenti per sviluppatori, seleziona il genitore effettivo, non il figlio che vuoi ordinare, e verifica il valore applicato di display. Poi, controlla flex-direction, width, height, min-width e margin del figlio. Se il flex è coperto da un'altra regola o l'elemento da ordinare è un livello più in basso, non otterrai i risultati previsti.

I ritorni a capo sono diversi dal cambiare righe e colonne. In una situazione in cui una linea orizzontale trabocca, bisogna prima decidere se la colonna è appropriata e se è necessario il flex-wrap per mantenere più righe. Se il contenuto è nascosto su mobile, controlla la dimensione minima consentita agli elementi e l'ordine di lettura prima di nasconderlo con overflow: hidden. Le modifiche temporanee negli strumenti per sviluppatori possono essere annullate con un aggiornamento, e se hai modificato un file, dovrai ripristinare tu stesso eventuali valori salvati.