CSS'deki flex özelliği şunun kısaltmasıdır: esneyerek büyümek, esneyerek küçültmek, ve esnek tabanlı. Yalnızca esnek öğeler üzerinde çalışır, dolayısıyla kabın öğesi esnek öğe değilse, esnek özellik ilgili öğeyi etkilemeyecektir.

Bu özellik esnek öğelerin uzunluğunu ayarlamak için kullanılır. Bu CSS özelliği ile alt öğelerin ve ana kabın konumlandırılması kolaydır. Esnek bir öğenin alana sığacak şekilde nasıl küçüleceğini veya büyüyeceğini ayarlamak için kullanılır.

esnek özellik bir, iki veya üç değerle belirtilebilir.

• Tek değerli sözdizimi olduğunda, değer ya bir sayı ya da gibi anahtar kelimeler olmalıdır. hiçbiri, otomatik, veya ilk .
• İki değerli sözdizimi olduğunda, ilk değer bir sayı olmalıdır (olarak kullanılır) esnek büyüme ), ikinci değer bir sayı olabilir (için kullanılır) esnek-küçültme ) veya geçerli bir genişlik değeri (olarak kullanılır) esnek tabanlı ).
• Üç değerli sözdizimi olduğunda değerlerin şu sırayı takip etmesi gerekir: a sayı için esnek büyüme, A sayı için esnek-küçültme, ve geçerli Genişlik için değer esnek tabanlı .

Sözdizimi

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

Gayrimenkul değerleri

esnek büyüme: Esnek büyüme faktörünü belirleyen pozitif birimsiz bir sayıdır. Öğenin diğer esnek öğelere göre ne kadar büyüyeceğini belirtir. Negatif değerlere izin verilmez. Atlanırsa, değere ayarlanır 1 .

esnek-küçültme: Esnek büzülme faktörünü belirleyen pozitif birimsiz sayıdır. Öğenin diğer esnek öğelere göre ne kadar küçüleceğini belirtir. Negatif değerlere izin verilmez. Atlanırsa, değere ayarlanır 1 .

esnek temel: Esnek öğenin başlangıç ​​uzunluğunu tanımlayan, göreceli veya mutlak birimler cinsinden uzunluktur. Esnek öğenin uzunluğunu ayarlamak için kullanılır. Değerleri olabilir araba, miras, veya aşağıdaki gibi uzunluk birimlerinin takip ettiği bir sayı em, piksel, vb. Negatif değerlere izin verilmez. Atlanırsa, değere ayarlanır 0 .

Oto: Flex özelliğinin bu değeri şuna eşdeğerdir: 1 1 otomatik .

hiçbiri: Flex özelliğinin bu değeri şuna eşdeğerdir: 0 0 otomatik . Esnek öğeleri ne büyütür ne de küçültür.

ilk: Özelliği varsayılan değerine ayarlar. Şuna eşdeğerdir 0 0 otomatik .

miras: Özelliği ana öğesinden devralır.

Örnek

Bu örnekte, her biri üç esnek öğeye sahip üç kapsayıcı vardır. Genişlik ve konteynerlerin yüksekliği 300 piksel Ve 100 piksel .

Biz uyguluyoruz esnek: 1; ilk konteynerin esnek öğelerine, esnek: 0 50 piksel; ikinci kabın esnek öğelerine ve esnek: 2 2; üçüncü kabın esnek öğelerine.

 CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> 

Çıktı