CSS flex-flow Özelliği

CSS flex-flow

Css flex-flow özelliği flex-direction ve flex-wrap özelliklerini kapsayan kısa kestirme bir bildirimdir.Normal akış diyagaramında atlma olup olmamasını ve elemanların sıralanış yönlerini bildirmemize yarayan özelliktir.

Örnek:

Bu örnekte "eren css" ifadesindeki harfler birer div kutusuna yerleştiriliyor. flex-flow özelliğine row-reverse nowrap değeri atanarak satır düzeyinde tersten sıralanacağını ve elemanların bir bütün halinde kutuya sığmaları sağlanıyor.

#anakutu { width: 210px; height: 300px; border: 2px dotted black; display: -webkit-flex; -webkit-flex-flow: row-reverse nowrap; display: flex; flex-flow: row-reverse nowrap; } #anakutu div { width: 30px; height: 30px; color: white; font-size: 1.5em; text-align: center; }

CSS flex-flow nedir nasıl kullanılır

flex-direction: Esnek kutu içerisindeki elemanların sıralanış yönünü düzenler.

flex-wrap: Esnek kutu içerisindeki elemanların aşağıya doğru kaydırma yapılıp yapılmayacağını kontrol eder.

CSS flex-flow CSS flex-flow özellikleri  
Varsayılan Değer: row nowrap  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS3  
JavaScript flex-flow: object.style.flexFlow="row wrap"

CSS flex-flow Tarayıcı Desteği

Tablodaki sayılar özelliği destekleyen ilk tarayıcı sürümünü belirtir.

CSS Kodu:
flex-flow 29.0
21.0 -webkit-
11.0 28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

CSS flex-flow Değerleri

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

CSS flex-flow özelliği değerleri

CSS flex-flow değerleri CSS flex-flow değerleri tanımları CSS örnek uygulamalar
flex-direction Esnek kutu içerisindeki elemanların sıralanma yönünü düzenleyen değerdir.
flex-wrap Word'teki sözcük kaydırma özelliğine benzer.Elemanlar bir alt satıra kaydırılmasından yada kaydırılmamasından sorumlu değerdir.
initial Özelliğin varsayılan değeridir.
inherit Soybağından gelen değerdir.  

Yorumlar

Bu blogdaki popüler yayınlar

HTML yorum etiketi ile öğe gizleme örneği

Linklerin Renklerini Değiştirme Örnek

YouTube Reklam Engelleyici

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

HTML Resimler

HTML bdo Etiketi Örnek