Properti flex-direction
ini 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-direction
harta benda.
Tempat flex-direction
penginapan ini menerima 4 nilai yang berbeza:
row
( lalai ): sama dengan arah teksrow-reverse
: bertentangan dengan arah tekscolumn
: sama sepertirow
tetapi atas ke bawahcolumn-reverse
: sama darirow-reverse
atas ke bawah
Perhatikan bahawa row
dan row-reverse
dipengaruhi oleh arah wadah flex. Sekiranya arah teksnya ltr
, row
mewakili paksi mendatar yang berorientasi dari kiri ke kanan, dan row-reverse
dari 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.
Lihat Pen ini!
Jadi pada dasarnya, anda akan menggunakan row
dalam kebanyakan kes, atau column
dalam 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).