Flex direction

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

• ⏱️ 8 ore di corso registrato
• 🧩 Più di 50 algoritmi risolti passo passo
• 🎯 Livello base — da zero ad eroe
• 💻 100% online, fruibile quando vuoi

Prezzo€ 19,90

🅿️Acquista con PayPal — € 19,90

Con questa proprietà si dispongono gli elementi orizzontalmente per righe e nello stesso ordine in cui sono indicati nel documento html.

flex-direction: row-reverse;  

È simile alla precedente, in quanto gli elementi sono disposti orizzontalmente,  ma l'ordine è inverso rispetto all'ordine in cui sono specificati nel documento html.

flex-direction: column;  

Questa proprietà permette di disporre gli elementi verticalmente per colonne e nello stesso ordine in cui sono indicati nel documento html.

flex-direction: column-reverse;

Anche questa proprietà permette la disposizione degli elementi verticalmente per colonne ma nell'ordine inverso in cui sono indicati nel documento html.

Esempi flex direction

Facciamo adesso degli esempi pratici per vedere gli effetti di questa importante proprietà.

Inseriamo, come abbiamo visto negli altri esempi, il codice CSS all'interno della stessa pagina html, semplicemente per comodità.

Di seguito dunque il codice CSS completo:

.container {
        width:400px;
        margin-top:20px;
        background-color: #ff00ff;
        display: flex;
        flex-direction: column;
 }
.container > div {
        background-color: #eee;
        font-size:18px;
        text-align:center;
        width: 150px;
        padding: 10px;
        margin:10px;
 }

Il codice html per realizzare l'esempio:

  <div class="container">
    <div>flex-direction: column</div>
    <div>flex-direction: column</div>
    <div>flex-direction: column</div>
  </div>

Quindi, visualizzando l'esempio sopra su un qualsiasi browser, si ottiene un layout di questo tipo:

Come possiamo notare gli elementi invece di essere disposti per riga, come di default, sono disposti per colonna, quindi verticalmente.

📚 Consigliato per te

50 Algoritmi per imparare JavaScript

Una guida step by step per imparare JavaScript con esercizi svolti.

Vedi su Amazon

Infatti se proviamo semplicemente a togliere la proprietà:

flex-direction:column

oppure, in modo analogo, ad inserire:

flex-direction:row

Si ha una disposizione di questo tipo:

Se andiamo ad impostare la proprietà

flex-direction:row-reverse

si stabilisce un ordine diverso degli elementi, come si può notare dalla figura sotto:

Analogamente se impostiamo

flex-direction:column-reverse

questo è quello che si andrà a visualizzare:

Nella prossima lezione vedremo altri esempi di applicazioni utilizzando le varie proprietà delle flexbox.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive