CSS esnek-yönlendirme özelliği

Tanım ve Kullanım

flex-direction özelliği esnek öğelerin yönünü belirler.

Açıklama:Eğer öğe esnek bir proje değilse, flex özelliği geçersizdir.

Ayrıca bakınız:

CSS Eğitimi:CSS Esnek Kutusu

CSS Referans Kılavuzu:flex Özelliği

CSS Referans Kılavuzu:flex-basis Özelliği

CSS Referans Kılavuzu:flex-flow Özelliği

CSS Referans Kılavuzu:flex-grow Özelliği

CSS Referans Kılavuzu:flex-shrink Özelliği

CSS Referans Kılavuzu:flex-wrap Özelliği

HTML DOM Referans Kılavuzu:flexDirection Özelliği

Örnek

<div> elementi içindeki esnek projelerin yönünü ters sırayla ayarlar:

div {
  display: flex;
  flex-direction: row-reverse; 
}

Kendi Kendine Deneyin

CSS Dilbilgisi

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Özellik Değeri

Değer Açıklama
row Varsayılan Değer. Bir satır olarak, esnek projeleri yatay olarak gösterir.
row-reverse Eşit satırlar, ancak ters yönde.
column Sütun olarak, esnek projeleri dikey olarak gösterir.
column-reverse Eşit sütunlar, ancak ters yönde.
initial Bu özelliği varsayılan değerine ayarlar. Ayrıca bakınız: initial。
inherit Bu özelliği ebeveyn elementinden miras alır. Ayrıca bakınız: inherit。

Teknik Ayrıntılar

Varsayılan Değer: row
Geçiş: Hayır
Animasyon Yapımı: Desteklenmiyor. Ayrıca bakınız:Animasyon İle İlgili Özellikler。
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.flexDirection="column-reverse"

Daha Fazla Örnek

flex-direction ve medya sorgularını bir araya kullanarak farklı ekran boyutları/cihazlar için farklı düzenler oluşturun:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Yanıtlayıcı Düzenleme - Tek sütun düzeni (100%) yerine iki sütun düzeni (50%) yapar */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Kendi Kendine Deneyin

Tarayıcı Desteği

Tablodaki numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

数字, -webkit- veya -moz- ile başlayan, öne ek kullanılan ilk sürümü gösterir.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0