CSS flex-basis Özelliği

CSS flex-basis

Css flex-basis :Esnek kutu modelinde optimum boyutunu belirlemek için kullanılır. Eğer yeterli genişlik var ise esnek kutu verilen değer boyutunda olacaktır.

Örnek:

Bu örnekte anaka kutu içerisindeki bütün elemanlara başlangıç uzunluğu 40pxverilmiştir.2. sıradaki elemanının genişliğini ise 90px olarak değiştirdik.

#anakutu div { -webkit-flex-grow: 0; -webkit-flex-shrink: 0; -webkit-flex-basis: 40px; flex-grow: 0; flex-shrink: 0; flex-basis: 40px; } #anakutu div:nth-of-type(2) { -webkit-flex-basis: 90px; flex-basis: 90px; }

CSS flex-basis nedir nasıl kullanılır

Flex-basis özelliği sayısal olarak uzunluk yani genişlik tanımlamıza yarar.

CSS flex-basis	CSS flex-basis özellikleri
Varsayılan Değer:	auto
Kalıtsallık:	yok
Animasyon Özelliği:	var
Versiyon:	CSS3
JavaScript flex-basis:	object.style.flexBasis="250px"

CSS flex-basis Tarayıcı Desteği

CSS Kodu:
flex-basis	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

CSS flex-basis Değerleri

flex-basis:number|auto|initial|inherit;

CSS flex-basis özelliği değerleri

CSS flex-basis değerleri	CSS flex-basis değerleri tanımları	CSS örnek uygulamalar
number	Esnek öğenin ilk uzunluğunu belirten bir uzunluk birimi girilir veya yüzde değeri yazılır.
auto	Varsayılan değer. Uzunluk esnek öğenin uzunluğuna eşittir .
initial	Özelliğin varsayılan değeridir.
inherit	Soybağından gelen değerdir.