align-self

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

La proprietà align-self consente di sovrascrivere la proprietà align-items di flexbox per un singolo elemento flex.

Ha gli stessi valori possibili di align-items:

flex-start
flex-end
center
stretch
baseline

Esempio,

.item {
  align-self: center;
}

Sfida

Facile

Ti viene fornito un flexbox con tre elementi; aggiungi align-self a ogni elemento flex.

Usa i valori flex-start, flex-end e center per ciascun elemento, in qualsiasi ordine.

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-content align-items align-content gap Centratura perfetta

3Elementi flex

Elementi figli order flex-growalign-self

Esercitati da solo: Playground Web