Che cos'è Flexbox?

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 44 di 76.

In CSS, il layout Flexbox è uno strumento potente che offre un modo efficiente per allineare e distribuire lo spazio tra gli elementi in un contenitore. Con Flexbox, puoi controllare l'allineamento, la direzione, l'ordine e le dimensioni degli elementi all'interno di un contenitore, creando layout flessibili e dinamici che si adattano a schermi e dispositivi di dimensioni diverse.

Per usare Flexbox, devi prima definire un contenitore flex. Per farlo, imposta la proprietà display di un elemento su flex o inline-flex. Una volta creato un contenitore flex, i suoi figli diretti diventano automaticamente elementi flex.

Ecco la sintassi di base per creare un contenitore flex:

.container {
    display: flex;
}

display: flex;: Questa dichiarazione trasforma l'elemento selezionato in un contenitore flex e i suoi figli diretti in elementi flex.

Una volta creato un contenitore flex, puoi usare diverse proprietà Flexbox per controllare la disposizione dei suoi elementi flex. Alcune delle proprietà più utilizzate includono:

flex-direction: Specifica la direzione degli elementi flex (row, column, row-reverse, column-reverse).
justify-content: Allinea gli elementi flex lungo l’asse principale (ad es., flex-start, flex-end, center, space-between, space-around).

align-items: Allinea gli elementi flex lungo l'asse trasversale (ad es., flex-start, flex-end, center, baseline, stretch).
flex-wrap: Controlla se gli elementi flex devono andare a capo su più righe (wrap, nowrap, wrap-reverse).
align-content: Allinea le righe flex quando c'è spazio extra sull'asse trasversale (simile a justify-content, ma per più righe).

Sfida

Facile

Ti viene fornito un documento HTML con un elemento div (<div>) che contiene tre elementi div figli (<div>). Il tuo compito è usare la proprietà display: flex; per trasformare l'elemento div genitore in un contenitore flex. Segui i passaggi riportati di seguito:

Scrivi una regola CSS che selezioni l'elemento <div> con la classe container.
Imposta la proprietà display dell'elemento .container su flex.

Provalo tu

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>