CSS flex Özelliği

CSS flex

Css flex ö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 örnekte flex ö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

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