Esnek - CSS Hileleri

flexMülkiyet Esnek Kutu Düzeni modülünün bir alt özelliktir.

Bu için kısaltmadır flex-grow, flex-shrinkve flex-basis. İkinci ve üçüncü parametreler ( flex-shrinkve flex-basis) isteğe bağlıdır.

Sözdizimi

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

İşte, ona kaç değer verdiğinize bağlı olarak değerlerin neyle eşleştiğine dair kepçe:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

İçin ortak değerler flex

esnek: 0 otomatik;

Bu aynıdır flex: initial;ve varsayılan değeri için steno: flex: 0 1 auto. Öğeyi width/ heightözelliklerine (veya ayarlanmamışsa içeriğine) göre boyutlandırır .

Biraz boş alan kaldığında esnek öğeyi esnek kılar, ancak yeterli alan olmadığında minimuma inmesine izin verir. Hizalama yetenekleri veya autokenar boşlukları, esnek öğeleri ana eksen boyunca hizalamak için kullanılabilir.

flex: otomatik;

Bu eşdeğerdir flex: 1 1 auto. Dikkat edin, bu varsayılan değer değil. Öğeyi width/ heightözelliklerine göre boyutlandırır , ancak tamamen esnek hale getirir, böylece ana eksen boyunca herhangi bir ekstra alanı emer.

Tüm öğeler ise flex: auto, flex: initialya flex: none, boyutlandınîmış öğeler sonra kalan boşluk ile öğelere eşit olarak dağıtılacaktır flex: auto.

flex: yok;

Bu eşdeğerdir flex: 0 0 auto. Öğeyi width/ heightözelliklerine göre boyutlandırır , ancak tamamen esnek olmasını sağlar.

Bu, flex: initialtaşma durumunda bile küçülmesine izin verilmemesi dışında benzerdir .

esnek:

Eşdeğeri flex: 1 0px. Esnek öğeyi esnek hale getirir ve esnek esasını sıfıra ayarlayarak, kalan alanın belirtilen oranını alan bir öğeyle sonuçlanır.

Esnek kapsayıcıdaki tüm öğeler bu deseni kullanıyorsa, boyutları belirtilen esnek faktörle orantılı olacaktır.

Demo

Aşağıdaki demo, flexözellik sayesinde Flexbox ile çok basit bir düzen göstermektedir :

İşte açığa çıkan kod parçası:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

İlk olarak, esnek öğelerin birden çok satırda görüntülenmesine izin verdik flex-flow: row wrap.

Sonra hem üstbilgiye hem de altbilgiye, ne olursa olsun, mevcut görüntü alanı genişliğinin% 100'ünü almasını söyleriz.

Ve ana içerik ve her iki kenar çubuğu aynı satırı paylaşacak ve kalan alanı şu şekilde paylaşacaktır: Ana içerik için% 66 (2 / (1 + 2)), kenar çubuğu için% 33 (1 / (1 + 2)) .

Tarayıcı Desteği

• (modern), spesifikasyondaki son sözdizimi anlamına gelir (örneğin display: flex;)
• (karma), 2011'den kalma garip bir resmi olmayan sözdizimi anlamına gelir (örneğin display: flexbox;)
• (eski), 2009'daki eski sözdizimi anlamına gelir (örneğin display: box;)

Krom	Safari	Firefox	Opera	IE	Android	iOS
21+ (modern) 20- (eski)	3.1+ (eski)	2-21 (eski) 22+ (yeni)	12.1+ (modern)	10+ (karma)	2.1+ (eski)	3.2+ (eski)

Blackberry tarayıcı 10+ yeni sözdizimini destekler.

En iyi tarayıcı desteğini almak için sözdizimlerinin nasıl karıştırılacağı hakkında daha fazla bilgi için lütfen bu makaleye (CSS Hileleri) veya bu makaleye (DevOpera) bakın.