English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Impostando la direzione dell'asse principale del contenitore flex, l'attributo CSS flex-direction specifica come posizionare gli elementi flex all'interno del contenitore flex.
La tabella seguente fornisce la descrizione dell'uso e la cronologia delle versioni di questa proprietà, nonché la sintassi di utilizzo di questa proprietà nei script JavaScript.
| Valore predefinito: | row |
|---|---|
| Applicabile a: | Contenitore elastico |
| Ereditarietà: | Nessuno |
| Animabile: | No.Si prega di consultare Proprietà animazione. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | oggetto.style.flexDirection="row-reverse" |
La sintassi di questa proprietà è la seguente:
flex-direction: row | row-reverse | column | column-reverse | initial | inherit
Gli esempi seguenti illustrano come utilizzare la proprietà flex-direction.
.flex-container {
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}Testa per vedere‹/›La tabella sottostante descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| row | L'asse principale del contenitore flex è nella direzione dell'asse inline del modello di scrittura corrente, ossia la direzione del testo. |
| row-reverse | Come row, ma con l'origine e la fine dell'asse opposte. |
| column | L'asse principale del contenitore flex è nella direzione dell'asse del blocco del testo corrente (asse verticale nella modalità di scrittura orizzontale e asse orizzontale nella modalità di scrittura verticale). |
| column-reverse | Come le colonne, ma con l'origine e la fine dell'asse opposte. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato adotta il valore della proprietà flex-direction del suo elemento padre. |
Compatibilità del browser per la proprietà flex-direction, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.
|
Si prega di consultare la seguente guida:Layout a più colonne del CSS3.
Proprietà correlate:align-content,align-items,align-self,display,flex,flex-basis,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.