Örnek
Tüm esnek öğeleri aynı uzunlukta olalım, içeriği regardles:
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
Kendin dene " Tanımı ve Kullanımı
esnek özellik aynı kabın içine esnek öğelerin geri kalan kısmına göre öğenin uzunluğunu belirtir.
Flex özelliği esnek-büyümek esnek büzülme, ve esnek-baz özellikleri için bir kısaltmadır.
Note: eleman esnek bir öğe değilse, esnek özellik hiçbir etkisi olmaz.
Varsayılan değer: | 0 1 auto |
---|---|
Miras: | no |
canlandırılabilir: | yes, see individual properties . Read about animatable |
Versiyon: | CSS3 |
JavaScript sözdizimi: | object .style.flex="1" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -webkit-, -ms- ardından veya önek ile çalıştı ilk sürümü belirtmek -moz-.
özellik | |||||
---|---|---|---|---|---|
flex | 29.0 21,0 -webkit- | 11.0 10.0 -ms- | 28,0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
CSS sözdizimi
flex: Mülkiyet Değerler değer Açıklama flex-grow madde esnek öğelerin geri kalan kısmına göre büyüyecek ne kadar belirten bir sayı flex-shrink madde esnek öğelerin geri kalanına göreli küçüleceği ne kadar belirten bir sayı flex-basis öğenin uzunluğu. Yasal değerler: "auto" , "inherit" veya takip ettiği bir sayı "%" , "px" , "em" ya da başka bir uzunluk birimi auto 1 1 otomatik olarak aynı. initial 0 1 otomatik olarak aynı. İlk hakkında okuyun none 0 0 auto aynı. inherit üst öğesinden bu özelliği devralır. Yaklaşık miras oku
İlgili Sayfalar
CSS Referansı: flex-basis property
CSS Referansı: flex-direction property
CSS Referansı: flex-flow property
CSS Referans: flex-grow property
CSS Referansı: flex-shrink property
CSS Referansı: flex-wrap property
HTML DOM referansı: flex property