Contoh
Mengatur arah item fleksibel dalam <div> elemen dalam urutan terbalik:
div
{
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
Cobalah sendiri " Definisi dan Penggunaan
Properti flex-arah menentukan arah item yang fleksibel.
Note: Jika elemen bukan barang yang fleksibel, properti flex-arah tidak berpengaruh.
| nilai default: | row |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.flexDirection="column-reverse" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit- atau moz menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| flex-direction | 29,0 21.0 -webkit- | 11.0 | 28.0 18,0 moz | 9.0 6.1 -webkit- | 17.0 |
CSS Syntax
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| row | nilai default. Item fleksibel ditampilkan secara horizontal, sebagai berturut-turut | Mainkan " |
| row-reverse | Sama seperti baris, tetapi dalam urutan terbalik | Mainkan " |
| column | Item fleksibel ditampilkan secara vertikal, sebagai kolom | Mainkan " |
| column-reverse | Sama seperti kolom, tetapi dalam urutan terbalik | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Pages terkait
CSS Referensi: flex-flow property
CSS Referensi: flex-wrap property
CSS Referensi: flex property
CSS Referensi: flex-grow property
CSS Referensi: flex-shrink property
CSS Referensi: flex-basis property
Referensi HTML DOM: flexDirection property