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