align-items

Lezione 8 di 15 del corso CSS Flexbox - Il corso completo di Coddy.

La proprietà align-items definisce l’allineamento lungo l’asse trasversale.

L’asse trasversale è orizzontale per la direzione delle colonne e verticale per la direzione delle righe.

Accetta cinque valori:

flex-start - allinea gli elementi all’inizio dell’asse trasversale.
flex-end - allinea gli elementi alla fine dell’asse trasversale.
center - allinea gli elementi al centro dell’asse trasversale.
stretch - gli elementi si estendono per riempire il contenitore lungo l’asse trasversale.
baseline - gli elementi sono allineati in modo che le loro linee di base coincidano.

Il valore predefinito di un contenitore flex è stretch.

Ad esempio,

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

Sfida

Facile

Definisci l’allineamento lungo l’asse trasversale del flexbox dato su center.

Prova tutti i valori!

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
</html>

Tutte le lezioni di CSS Flexbox - Il corso completo

1Introduzione

Introduzione Contenitore ed elementi

2Contenitore Flex

Flexbox flex-direction flex-wrap flex-flow justify-contentalign-itemsalign-content gap Centratura perfetta

3Elementi flex

Elementi figli order flex-grow align-self

Esercitati da solo: Playground Web