Properti flex-directionini adalah sub-hak milik modul Flexible Box Layout.
Ini menetapkan paksi utama, dengan demikian menentukan arah item flex diletakkan di dalam wadah flex.
Peringatan: paksi utama wadah lentur adalah paksi utama di mana item lentur dibentangkan. Hati-hati, tidak semestinya mendatar; itu bergantung pada flex-directionharta benda.
Tempat flex-directionpenginapan ini menerima 4 nilai yang berbeza:
row( lalai ): sama dengan arah teksrow-reverse: bertentangan dengan arah tekscolumn: sama sepertirowtetapi atas ke bawahcolumn-reverse: sama darirow-reverseatas ke bawah
Perhatikan bahawa rowdan row-reversedipengaruhi oleh arah wadah flex. Sekiranya arah teksnya ltr, rowmewakili paksi mendatar yang berorientasi dari kiri ke kanan, dan row-reversedari kanan ke kiri; jika arahnya rtl, sebaliknya.
Sintaks
flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )Demo
Dalam demo berikut:
- Senarai merah ditetapkan ke
row - Senarai kuning ditetapkan ke
row-reverse - Senarai biru ditetapkan ke
column - Senarai hijau ditetapkan ke
column-reverse
Catatan: Arah teks belum diedit.
Jadi pada dasarnya, anda akan menggunakan rowdalam kebanyakan kes, atau columndalam keadaan tertentu. Jika tidak, agak jarang membalikkan arah arah.
Sokongan Penyemak Imbas
- (moden) bermaksud sintaks terbaru dari spesifikasi (contohnya
display: flex;) - (hibrid) bermaksud sintaksis tidak rasmi yang ganjil dari 2011 (mis.
display: flexbox;) - (lama) bermaksud sintaks lama dari 2009 (mis.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moden) 20- (lama) | 3.1+ (lama) | 2-21 (lama) 22+ (baru) | 12.1+ (moden) | 10+ (kacukan) | 2.1+ (lama) | 3.2+ (lama) |
Penyemak imbas Blackberry 10+ menyokong sintaks baru.
Untuk maklumat lebih lanjut mengenai cara mencampurkan sintaks untuk mendapatkan sokongan penyemak imbas terbaik, sila rujuk artikel ini (Trik CSS) atau artikel ini (DevOpera).