Flex CSS Kısa Yolu

flex CSS özelliği esnek bir öğenin nasıl küçüleceğini, büyüyeceğini ve diğer esnek öğelere göre nasıl boyutlanacağını belirtir.

Flex Özelliği Aşağıdaki CSS Özellikleri için Kısa Yoldur

• flex-grow
• flex-shrink
• flex-basis

Flex CSS Varsayılan Değeri

flex: 0 1 auto;

flex: <flex-grow>  <flex-shrink> <flex-basis>
               

Flex Sözdizimi

flex değeri 1, 2 ve 3 değer kullanılarak belirtilebilir. Aşağıda örnek olarak flex kullanımlarını ve açıklamalarını inceleyebilirsiniz.

/* Birimsiz tek bir sayı değeri yazıyor ise bu "flex-grow" değerini ifade eder;  flex-basis değeri = 0 olur*/ 
flex:1; 
flex:3;  /* flex-grow:3 */
/* birimli tek bir sayı değeri yazıyor ise bu "flex-basis" değerini ifade eder */
flex:30em;
flex:50%;
flex:100px; /* flex-basis:100px */
/*2 değer Bir birimsiz ve bir de birimsiz değer "flex-grow" ve "flex-basis" değerini ifade eder */
flex:1 200px; /* flex-grow:1 ve flex-basis:200px; */
/*2 birimsiz değer içeriyor ise"flex-grow" ve "flex-basis" değerini ifade eder */
flex:1 0; /* flex-grow:1 ve flex-shrink:0 */
/* 3 Değer içeriyorsa sırası ile "flex-grow", "flex-shrink", "flex-basis" değeri belirtilir */
flex:2 1 300px; /* flex-grow:2, flex-shrink:1, flex-basis:300px */
/* Global Değerleri */
flex: inherit;
flex: initial;
flex: revert;
flex: unset;
                    

Birimsiz Tek Sayı Değeri

flex: 2; şeklinde ise burada 2 değeri flex-grow = 2 olacaktır
flex-basis = 0 olacaktır.
flex-shrink = 1 olacaktır.

Birimli Tek Sayı Değeri

flex-shrink: 200px; şeklinde ise burada;

flex-basis = 200px;
flex-grow = 0 ve flex-shrink = 1 olacaktır. Yani varsayılan değerleri.

1 Birimli ve 1 Birimsiz Sayı Değeri

flex: 1 200px; bu şekilde ise;

flex-grow = 1 ve flex-basis = 200px olacaktır.

3 değer içerisiyorsa

flex: 1 0 300px; şeklinde 3 değer alıyor ise;
flex-grow = 1;
flex-shrink = 0;
flex-basis = 300px; şeklinde olacaktır.