CSS flex-flow Özelliği
CSS flex-flow
Cssflex-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;
Yorumlar
Yorum Gönder