The flex-directionproperti adalah sub-properti dari modul Fleksibel Box Layout.
Ini menetapkan sumbu utama, sehingga menentukan arah item fleksibel ditempatkan di wadah fleksibel.
Pengingat: sumbu utama wadah fleksibel adalah sumbu utama di mana item fleksibel diletakkan. Hati-hati, ini tidak selalu horizontal; itu tergantung pada flex-directionproperti.
The flex-directionproperti menerima 4 nilai yang berbeda:
row( default ): sama seperti arah teksrow-reverse: berlawanan dengan arah tekscolumn: samarowtapi dari atas ke bawahcolumn-reverse: sama sepertirow-reverseatas ke bawah
Perhatikan bahwa rowdan row-reversedipengaruhi oleh arah wadah fleksibel. Jika arah teksnya adalah ltr, rowmewakili sumbu horizontal yang diorientasikan dari kiri ke kanan, dan row-reversedari kanan ke kiri; jika arahnya adalah rtlsebaliknya.
Sintaksis
flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )Demo
Dalam demo berikut:
- Daftar merah diatur ke
row - Daftar kuning diatur ke
row-reverse - Daftar biru disetel ke
column - Daftar hijau diatur ke
column-reverse
Catatan: Arah teks belum diedit.
Jadi pada dasarnya, Anda akan menggunakan rowdalam banyak kasus, atau columndalam keadaan tertentu. Jika tidak, sangat jarang terjadi pembalikan arah urutan.
Dukungan Browser
- (modern) berarti sintaks terbaru dari spesifikasi (misalnya
display: flex;) - (hybrid) berarti sintaks tidak resmi ganjil dari 2011 (misalnya
display: flexbox;) - (lama) berarti sintaks lama dari 2009 (misalnya
display: box;)
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (lama) | 3.1+ (lama) | 2-21 (lama) 22+ (baru) | 12.1+ (modern) | 10+ (hibrida) | 2.1+ (lama) | 3,2+ (lama) |
Browser Blackberry 10+ mendukung sintaks baru.
Untuk informasi lebih lanjut tentang cara mencampur sintaks untuk mendapatkan dukungan browser terbaik, silakan lihat artikel ini (Trik CSS) atau artikel ini (DevOpera).