CSS esnek özelliği

Tanım ve Kullanım

Flex, aşağıdaki özelliklerin kısaltılmış özelliğidir:

Flex, esnek projelerin esnek uzunluğunu ayarlar.

Açıklama:Eğer element esnek bir proje değilse, flex özelliği geçersizdir.

Ayrıca bakınız:

Rehber: CSS esnek çerçevesi

Referans:CSS esnek-taban özelliği

Referans:CSS esnek-yönlendirme özelliği

Referans:CSS esnek-akış özelliği

Referans:CSS esnek-çıkış özelliği

Referans:CSS esnek-şekil özelliği

Referans:CSS esnek-döndürme özelliği

Referans:HTML DOM flex özelliği

Örnek

İçeriği ne olursa olsun, tüm esnek öğelerin uzunluklarını eşit hale getirin:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

Kişisel olarak deneyin

CSS dilbilgisi

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Özellik değeri

Değer Açıklama
flex-grow Sayı, öğenin diğer esnek öğelere göre genişleme miktarını belirler。
flex-shrink Sayı, öğenin diğer esnek öğelere göre daralma miktarını belirler。
flex-basis

Öğenin uzunluğu.

Geçerli değerler: "auto"、"inherit" veya "%"、"px"、"em" birimi olan değerler veya herhangi bir diğer uzunluk birimi.
auto 1 1 auto ile eşdeğerdir.
initial 0 0 auto ile eşdeğerdir. Gözatın: initial。
none 0 0 auto ile eşdeğerdir.
inherit Bu özelliği ebeveyn elementinden kalıtır. Gözatın: inherit。

Teknik ayrıntılar

Öntanımlı değer: 0 1 auto
Kalıtım: Hayır
Animasyon yapımı: Desteği var. Ayrı özellikleri kontrol edin. Gözatın:Animasyonla ilgili özellikler。
Sürüm: CSS3
JavaScript dilbilgisi: object.style.flex="1"

Daha fazla örnek

Farklı ekran boyutları/cihazlar için farklı düzenler oluşturmak için flex ve medya sorgularını birlikte kullanın:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* Yanıtlayıcı düzen - İki sütun düzeni (50％) yerine tek sütun düzeni (100％) yapın */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Kişisel olarak deneyin

Tarayıcı desteği

Tablo, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtir。

İlk sürüm olarak kullanılan ön ekli sayıları -webkit-、-ms- veya -moz- ile belirtin。

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0