HIZLI
TEKLİF AL

Flex Direction CSS Özellikleri

flex-direction özellği flexbox esnek kutu yapısının içerisindeki öğelerinin diziliş yönünü belirler. Öğeler normal şartlar altında main-axis (ana-eksen) yönünde dizilir. main-axis flex-direction özelliğine göre yatay konumda ya da dikey olarak blok-ekseni konumunda yer alır.

Aşağıdaki resimlerde main-axis ve cross-axis kavramlarını inceleyebilirsiniz. Ana-eksenin yönü flexbox içeriğinin akış yönünü etkiler. Ana-ekseni ve çapraz ekseni etkileyen hizlama özellikleri de mevcuttur. flexbox tüm özellikleri için tümüyle flexbox CSS yazımızı okuyunuz.

Flexbox css eksen yönü mantığı

 

 

Sayfa Başlıkları

Flex-direction 4 Değer Alır

  • flex-direction: row; Varsayılan (default) değerdir.
  • flex-direction: row-reverse;
  • flex-direction: column;
  • flex-direction: column-reverse;

Aşağıda flex-direction özelliklerini ayrıntılı açıklama ve uygulamalar ile inceleyebilirsiniz.

flex-direction:row (Varsayılan)

flex-direction row ekseni

Burada main-axis (ana eksen) yatayda yazı yazı yazma yönündedir. row değeri ile öğeler esnek kutunun sol ucundan başlayarak sağa doğru yazı yazma yönünde dizilir.


.container{ flex-direction: row; }
                

flex-direction:row-reverse

flex-direction row-reverse

Bu değerde main-axis (ana eksen) yatayda yazı yazı yazma yönünün tersidir. row-reverse değeri ile öğeler esnek kutunun sonundan yani sağ ucundan başlayarak yazı yazma yönünün tersi şeklinde sıralanır.


.container{ flex-direction: row-reverse; }
                                    

row | row-reverse değerlerinde main-axis (ana-eksen) yönü yatay yazı yazma yönü ve tersidir. cross-axis (çapraz-eksen) yönü ise blok-ekseni yönünde olacaktır. Ana-eksenin yönünün flex-direction değeri ile değiştiğini unutmayınız. main-axis ve cros-axis kavramlarını akış yönünün ve flexbox özelliklerinin nasıl çalışacağını belirlemektedir.

flex-direction:column (Varsayılan)

flex-direction column ekseni

Bu değerde main-axis (ana eksen) dikeyde blok-ekseni yönündedir.


.container{ flex-direction: column; }
                                    

flex-direction:column-reverse

flex-direction column-reverse

Bu değerde main-axis (ana eksen) dikeyde blok-ekseni yönünün tersidir.


.container{ flex-direction: column-reverse; }
                                    

flex-direction: row Örneği

Aşağıdaki örnekte gördüğünüz gibi öğeler yazı yazma yönünde soldan sağa doğru dizilmişlerdir. flex-direction:row; varsayılan değer olduğu için belirtmenize gerek yoktur.

flex-direction: row-reverse Örneği

Aşağıdaki örnekte gördüğünüz gibi öğeler yazı yazma yönünün tersinden başlamışlardır. Aynı zamanda öğeler dizilmeye esnek kutunun son ucundan başlamışlardır.

flex-direction: column  Örneği

flex-direction:column özelliğinde esnek kutunun main-axisi (ana-ekseni) blok-eksenidir.Öğeler alt alta blok-ekseni içerisinde sıralanır. column değerinde esnek kutunun en üst ucundan başlayarak hizalanır.

flex-direction: column-reverse  Örneği

flex-direction:column-reverse özelliğinde esnek kutunun main-axisi (ana-ekseni) blok-eksenidir. column-reverse değerinde esnek kutunun en alt ucundan başlayarak hizalanır.