Direzione flex

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

In CSS, la proprietà flex-direction controlla la direzione in cui sono disposti gli elementi all'interno di un contenitore flex. Determina se gli elementi sono disposti in una riga o in una colonna.

Questo influisce anche sul funzionamento di proprietà come justify-content e align-items. Usare correttamente flex-direction aiuta a creare layout flessibili e reattivi.

Ecco la sintassi di base per usare la proprietà flex-direction:

.container {
    display: flex;
    flex-direction: value;
}

value: La direzione desiderata per gli elementi flex, che può essere una delle seguenti:

row: Questo è il valore predefinito. Gli elementi flex sono disposti in una riga, da sinistra a destra. L'asse principale è orizzontale e l'asse trasversale è verticale.

row-reverse: Gli elementi Flex sono disposti in una riga, da destra a sinistra. L’asse principale è orizzontale e l’asse trasversale è verticale.

column: Gli elementi flex sono disposti in una colonna, dall'alto verso il basso. L'asse principale è verticale e l'asse trasversale è orizzontale.

column-reverse: Gli elementi flex sono disposti in una colonna, dal basso verso l’alto. L’asse principale è verticale e l’asse trasversale è orizzontale.

Ad esempio:

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

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

In questo esempio, l'elemento .container-row visualizzerà i suoi elementi flex in una riga da sinistra a destra, mentre l'elemento .container-row-reverse li visualizzerà da destra a sinistra.

Sfida

Facile

Ti viene fornito un documento HTML con due elementi genitori <strong><div></strong>, ciascuno contenente tre elementi figli <strong><div></strong>. Gli elementi <div> genitori sono già stati impostati come contenitori flex usando display: flex;. Il tuo compito è usare la proprietà flex-direction per modificare la disposizione degli elementi flex.

Segui i passaggi riportati di seguito:

Scrivi una regola CSS che selezioni l'elemento <div> con la classe container1.
- Imposta la proprietà flex-direction su column per disporre gli elementi flex in una colonna verticale.
Scrivi una regola CSS che selezioni l'elemento <div> con la classe container2.
- Imposta la proprietà flex-direction su column-reverse per disporre gli elementi flex in una colonna invertita.

Provalo tu

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>