CSS flex Özelliği
CSS flex
Cssflex özelliği esnek kutu modeli yöntemini uygulamamızı sağlayan bir özelliktir.Bir kapsayıcı div elemanı flex özelliği gösterdiğinde verilen değerlere göre içerisindeki elemanlarıda esnek davranacaktır.Özelliğin etkisini daha detaylı anlamak için örnekleri inceleyiniz.
Örnek:
Bu örnekteflex özelliği tanımlanan anakutu içerisindeki div elemanlarına flex: 1; değeri verilerek esnek kutu içerisine aynı büyüklükte sığacak şekilde konumlandılar. #anakutu {
width: 180px;
height: 250px;
border: 2px solid gray;
display: -webkit-flex;
display: flex;
}
#anakutu div {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
CSS flex nedir nasıl kullanılır
Flex özelliği flex-grow, flex-shrink, ve flex-basis özellikleri tanımlanmasının kısa bildirim şeklidir.
| CSS flex | CSS flex özellikleri | |
|---|---|---|
| Varsayılan Değer: | 0 1 auto | |
| Kalıtsallık: | yok | |
| Animasyon Özelliği: | var | |
| Versiyon: | CSS3 | |
| JavaScript flex: | object.style.flex="1" |
CSS flex Tarayıcı Desteği
Tablodaki sayılar özelliği ilk destekleyen tarayıcı sürümlerini göstermektedir.
| CSS Kodu: | |||||
|---|---|---|---|---|---|
| flex | 29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
CSS flex Değerleri
flex:flex-grow|flex-shrink |flex-basis|auto|initial|inherit;
CSS flex özelliği değerleri
| CSS flex değerleri | CSS flex değerleri tanımları |
|---|---|
| flex-grow | Elemanlar belirtilen değere göre göreceli büyür. |
| flex-shrink | Elemanlar belirtilen değere göre göreceli küçülür.. |
| flex-basis | Sayısal olarak elemanların uzunluk değeridir. |
| auto | Otamatik değerdir 1:1 |
| none | Özellik uygulanmaz. |
| initial | Özelliğin varsayılan değeridir. |
| inherit | Soybağından gelen değer kullanılır. |
Yorumlar
Yorum Gönder