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

CSS content Özelliği

HTML progress Etiketi

HTML section Etiketi

CSS justify-content Özelliği

CSS align-items özelliği

CSS transition-delay Özelliği

CSS top Özelliği

CSS border-collapse Özelliği

CSS text-justify Özelliği

CSS background-repeat Özelliği