flex-directionMülkiyet Esnek Kutu Düzeni modülünün bir alt özelliktir.
Ana ekseni oluşturur, böylece esnek parçaların esnek konteynere yerleştirilme yönünü tanımlar.
Hatırlatma: Bir esnek kabın ana ekseni, esnek öğelerin yerleştirildiği birincil eksendir. Dikkat edin, yatay olması gerekmez; flex-directionmülke bağlıdır .
Tesis flex-direction4 farklı değeri kabul eder:
row( varsayılan ): metin yönüyle aynırow-reverse: metin yönünün tersicolumn: aynırowama yukarıdan aşağıyacolumn-reverse:row-reverseyukarıdan aşağıya aynı
Not rowve row-reverseesnek konteyner yonlülüğu etkilenir. Metin yönü ise ltr, rowsoldan sağa ve sağdan sola yönlendirilmiş yatay ekseni temsil eder row-reverse; yön ise rtl, tam tersidir.
Sözdizimi
flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )Demo
Aşağıdaki demoda:
- Kırmızı liste olarak ayarlandı
row - Sarı liste olarak ayarlandı
row-reverse - Mavi liste olarak ayarlandı
column - Yeşil liste şu şekilde ayarlandı:
column-reverse
Not: Metin yönü düzenlenmemiştir.
Yani temel olarak, rowçoğu durumda veya columnbelirli koşullar altında kullanacaksınız . Aksi takdirde, yön sırasını tersine çevirmek oldukça nadirdir.
Tarayıcı Desteği
- (modern), spesifikasyondaki son sözdizimi anlamına gelir (örneğin
display: flex;) - (karma), 2011'den kalma garip bir resmi olmayan sözdizimi anlamına gelir (örneğin
display: flexbox;) - (eski), 2009'daki eski sözdizimi anlamına gelir (örneğin
display: box;)
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (eski) | 3.1+ (eski) | 2-21 (eski) 22+ (yeni) | 12.1+ (modern) | 10+ (karma) | 2.1+ (eski) | 3.2+ (eski) |
Blackberry tarayıcı 10+ yeni sözdizimini destekler.
En iyi tarayıcı desteğini elde etmek için sözdizimlerinin nasıl karıştırılacağı hakkında daha fazla bilgi için, lütfen bu makaleye (CSS Hileleri) veya bu makaleye (DevOpera) bakın.