Allinea gli elementi

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

In CSS, la proprietà align-items controlla come gli elementi flex vengono allineati lungo l’asse trasversale (l’opposto dell’asse principale). Aiuta a posizionare gli elementi verticalmente in una riga o orizzontalmente in una colonna. Questa proprietà è utile per rendere i layout più flessibili e reattivi.

Ecco la sintassi di base per usare la proprietà align-items:

.container {
    display: flex;
    align-items: value;
}

value: l’allineamento desiderato per gli elementi flex lungo l’asse trasversale, che può essere uno dei seguenti:

stretch: è il valore predefinito. Gli elementi flex vengono allungati per riempire il contenitore lungo l’asse trasversale, rispettando min-width/max-width e min-height/max-height.

flex-start: Gli elementi flex vengono posizionati all'inizio dell'asse trasversale.

flex-end: Gli elementi flex sono posizionati alla fine dell'asse trasversale.

center: Gli elementi Flex sono centrati lungo l’asse trasversale.

baseline: gli elementi Flex sono allineati in modo che le loro linee di base coincidano.

Per esempio:

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

In questo esempio, l'elemento .container-start allineerà i suoi elementi flex all'inizio dell'asse trasversale, mentre l'elemento .container-center centrerà i suoi elementi flex lungo l'asse trasversale.

Sfida

Facile

Ti viene fornito un documento HTML con due divisioni (<div>), ciascuna contenente tre divisioni figlie.

Segui i passaggi seguenti:

Definisci lo stile dell'elemento <strong>.seas</strong>:
- Scrivi una regola CSS che selezioni l'elemento <div> con la classe .seas.
- Imposta display su flex per abilitare il posizionamento flessibile degli elementi figli.
- Imposta la proprietà align-items su center per allineare gli elementi flex al centro dell'asse trasversale.
Definisci lo stile dell'elemento <strong>.oceans</strong>:
- Scrivi una regola CSS che selezioni l'elemento <div> con la classe .oceans.
- Imposta display su flex per abilitare il posizionamento flessibile degli elementi figli.
- Imposta la proprietà align-items su flex-end per allineare gli elementi flex alla fine dell'asse trasversale.

Provalo tu

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>