Arah lentur - Trik CSS

Anonim

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 teks
  • row-reverse: bertentangan dengan arah teks
  • column: sama seperti rowtetapi atas ke bawah
  • column-reverse: sama dari row-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.

Lihat Pen ini!

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).