flex-direction

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

La proprietà flex-direction definisce la direzione degli elementi flex.

Accetta quattro valori:

row - elementi flex da sinistra a destra.
row-reverse - elementi flex da destra a sinistra.
column - elementi flex dall'alto verso il basso.
column-reverse - elementi flex dal basso verso l'alto.

Il valore predefinito di un contenitore flex è row.

Esempio,

.container {
  display: flex;
  flex-direction: row-reverse;
}

Sfida

Facile

Definisci la direzione del flexbox indicato su column-reverse.

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>4</div>
        </div>
    </body>
</html>

Tutte le lezioni di CSS Flexbox - Il corso completo

1Introduzione

Introduzione Contenitore ed elementi

2Contenitore Flex

Flexboxflex-directionflex-wrap flex-flow justify-content align-items align-content gap Centratura perfetta

3Elementi flex

Elementi figli order flex-grow align-self

Esercitati da solo: Playground Web