CSS esnek-akış özelliği

Tanım ve kullanım

flex-flow özelliği, aşağıdaki özelliklerin kısaltılmış özelliğidir:

Yorum:Eğer element esnek proje değilse, flex özelliği geçersizdir.

Ayrıca bakınız:

CSS eğitimi:CSS esnek çerçevesi

CSS referans el kitabı:flex özelliği

CSS referans el kitabı:flex-direction özelliği

CSS referans el kitabı:flex-basis özelliği

CSS referans el kitabı:flex-grow özelliği

CSS referans el kitabı:flex-shrink özelliği

CSS referans el kitabı:flex-wrap özelliği

HTML DOM referans el kitabı:flexFlow özelliği

Örnek

Esnek projeleri ters yönde gösterir ve gerektiğinde satır değişimini sağlar:

div {
  display: flex;
  flex-flow: row-reverse wrap;
}

Kişisel olarak deneyin

CSS dilbilgisi

flex-flow: flex-direction flex-wrap|initial|inherit;

Özellik değeri

Değer Açıklama
flex-direction

Mümkün olan değerler:

  • row
  • row-reverse
  • column
  • column-reverse
  • initial
  • inherit

Varsayılan değeri "row" dir.

Esnek projelerin yönünü belirler.
flex-wrap

Mümkün olan değerler:

  • nowrap
  • wrap
  • wrap-reverse
  • initial
  • inherit

Varsayılan değeri "nowrap" dir.

Esnek projelerin satır değişimini belirler.
initial Bu özelliği varsayılan değerine ayarlar. Ayrıca bakınız: initial.
inherit Bu özelliği, ebeveyn elementinden kalıtsız alır. Ayrıca bakınız: inherit.

Teknik ayrıntılar

Varsayılan değer: row nowrap
Kalıtım: Hayır
Animasyon yapımı: Desteklenmiyor. Ayrıca bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.flexFlow="column nowrap"

Tarayıcı desteği

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

Sayısal değerler, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

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