CSS flex-direction
La proprietà CSS3 flex-direction definisce l'orientamento degli elementi flessibili
La proprietà flex-direction specifica la direzione dell'asse principale di un contenitore flex, determinando come vengono disposti gli elementi al suo interno. Può essere row, row-reverse, column o column-reverse. Introdotta nel modulo CSS3 Flexbox, è essenziale per la disposizione flessibile degli elementi.
Sintassi
Significato dei valori principali:
-
row: (predefinito) gli elementi sono disposti in orizzontale da sinistra a destra.
-
row-reverse: come
row, ma gli elementi sono disposti da destra a sinistra. -
column: gli elementi sono disposti in verticale, dall’alto verso il basso.
-
column-reverse: come
column, ma dall’alto verso il basso in ordine inverso.
Esempio proprietà: flex-direction
Codice Esempio: flex-direction
.flex-direction-container {
display: flex;
flex-direction: column;
width: 300px;
height: 300px;
background-color: #eee;
gap: 10px;
padding: 10px;
}.flex-dir-item {
background-color: #ff6347;
color: white;
padding: 20px;
text-align: center;
font-weight: bold;
border-radius: 4px;
}
Contenuto Esempio: flex-direction
Esempio di utilizzo di flex-direction
Nel seguente esempio, vengono mostrati due contenitori con la proprietà flex-direction impostata su row (default) e su column, per evidenziare chiaramente la differenza visiva tra le due direzioni:
CSS e HTML per l’esempio con flex-direction: row e column:
<style>
.flex-direction-container {
display: flex;
width: 300px;
height: 200px;
background-color: #eee;
gap: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.row-direction {
flex-direction: row;
}
.column-direction {
flex-direction: column;
}
.flex-dir-item {
background-color: #ff6347;
color: white;
padding: 18px;
text-align: center;
font-weight: bold;
border-radius: 4px;
flex: 1;
}
.flex-example-wrapper {
display: flex;
gap: 40px;
}
</style>
<div class="flex-example-wrapper">
<div class="flex-direction-container row-direction">
<div class="flex-dir-item">1</div>
<div class="flex-dir-item">2</div>
<div class="flex-dir-item">3</div>
</div>
<div class="flex-direction-container column-direction">
<div class="flex-dir-item">1</div>
<div class="flex-dir-item">2</div>
<div class="flex-dir-item">3</div>
</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
