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.  

Yorumlar

Bu blogdaki popüler yayınlar

HTML Resimler

HTML yorum etiketi ile öğe gizleme örneği

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

HTML5 Canvas Oyun Yapımı Dersleri

YouTube Reklam Engelleyici

javascript ile aciklama satiri ve haftanın gunünü bulma

Linklerin Renklerini Değiştirme Örnek

Uyurken Bile Para Kazanmak İster misin