CSS Flexbox ile Düzen. Flexbox, esnek css örneklerini kullanarak karmaşık düzenler üzerinde çalışmak için bazı yararlı örnekler

Örnek olarak gerçek bir test ödevinden bir form kullanarak, size nasıl dizgi yapacağınızı göstereceğim. BEM kullanarak esnek kutu... Soruyorsunuz: "Neden dizgi yapmak gerekli? BEM + Flexbox? "Bu gereklilik işverenden geliyor. TK'den alıntı:" Çerçeveler olmadan dizmeyi deneyin (tercihen esnek kutu) basit ve anlaşılır: hacimli yapılardan ve gereksiz kodlardan kaçının, metodolojiyi kullanın BEM."

Form içeren bir bölüm düzeninin parçası

Düzen kurallarım

1. Düzeni mantıksal bölümlere ayırın
2. Her bölüme bir etiketle başlayın Bölüm
3. Ayrı bölümler ve CSS ayrılmış, boş satır
4. Her etikete bir sınıf atayın
5. Bir blok veya öğenin sınıf adı, soruyu yanıtlar - Nedir?
6. Değiştirici adı soruyu cevaplar - Hangi?

HTML işaretlemesi

İlk önce işaretlemeyi yapıyorum, blokları yuvalıyorum ve sınıfları adlandırıyorum. Aşağıdaki kodda iki satır içi etiketimiz var - h2 ve giriş... Satır içi etiketler, acemi düzen tasarımcıları için bir baş ağrısı ve stres nedenidir. Niye ya? Çok kötü davranıyorlar - mevcut tüm genişliği işgal etmeye çalışıyorlar, tüm bloğun arka plan rengini ve boyutlarını ayarlamaya izin vermiyorlar.

kişisel bilgi

O zaman kötü bir düzen tasarımcısı ne yapar? Satır içi öğeleri blok etiketlerle sarar div ve gerekli tüm özellikleri sarmalayıcı etiketine ayarlar. Alt satır içi öğeler bu özellikleri devralır. Ekstra koddan bir bahçe inşa etmeye değer mi? Yetkili bir düzen tasarımcısı ne yapacak? Bir satır içi öğeyi, bir blok veya satır içi blok olarak geçersiz kılar. CSS tüzük.

Ekran bloğu; // giriş etiketi için
ekran: satır içi blok; // h2 etiketi için

Yuvalama mantığı ve blok adları

Kişisel bilgiler içeren bir bölüm görüyoruz, bu yüzden bölümün sınıfını diyoruz - bilgi... Bölüm üç çocuktan oluşur:

Simge // sınıf adı info__icon
başlık // bilgi__başlık
form // bilgi__form

Sonuç olarak, sınıfların adlarında BEM, çocuğun ebeveyne ait olmasından ibarettir. Bir öğeyi adlandıramıyorum simge... Bu sadece bir tür simge değil, bölümden bir simge bilgi.

Kızı ve ebeveyni bir arada

Engellemek info__form, özel bir tane var - bölümde yuvalanmış bilgi, ancak aynı zamanda form alanlarını içerir. Bu fenomenin adı çok düzeyli yuvalamadır. Formlu bir blok, harici dolguyu kolayca ayarlayabilmeniz için girdiler için tamamen sarma işlevine sahiptir. Ne de olsa, küçük harfli girdiler çocuk gibi davranırlar (ki öyledirler), hiç uymazlar. Ayrıca, ikinci giriş diğerlerinden daha kısadır ve yalnızca genişlikte farklılık gösterir.

Genişlik dışında aynı özelliklere sahip tüm girdiler için bir sınıf belirledik - info__input... Normal girişler için bir değiştirici ekleyin info__input_long, ve kısa giriş - değiştirici info__input_short... Değiştiricinin şu şekilde olduğunu hatırlatmama izin verin BEM, soruya cevap vermeli - Hangi?

Değiştiriciler için CSS kuralları

.info__input_long (
genişlik: 520 piksel;
}

Info__input_short (
genişlik: 320 piksel;
}

CSS kodu

V HTML biçimlendirme, sitenin kaba bir yapısını oluşturur, CSS, biz zaten elemanları yerleşime göre yerleştiriyoruz. Bugün görünümle ilgilenmeyecek, elemanların konumlandırılmasına odaklanacağız. Bölümümüzde iki adet flex konteyner bulunmaktadır. Tüm unsurları tek tek sıraya koyarken esneme kullanımının çok şüpheli olduğunu söylemeliyim. Kazanılan tek fayda mülkiyettir haklı içerik merkez hizalama esnek elemanları. Savunmamda, esneme fikrinin sadece bu bölüm bağlamında anlamsız olduğunu söyleyebilirim. Düzen için gerçek düzen genellikle daha çeşitlidir.

bilgi (
ekran: esnek;
haklı içerik: merkez;
hizalama öğeleri: merkez;
esnek yön: sütun;
üst kenar boşluğu: 77 piksel;
yükseklik: %100;
}

Bilgi__formu (
ekran: esnek;
haklı içerik: merkez;
esnek yön: sütun;
yükseklik: %100;
üst kenar boşluğu: 50 piksel;

Flexbox, haklı olarak, css'de düzenler oluştururken çok çeşitli sorunları çözmek için başarılı bir girişim olarak adlandırılabilir. Ancak bunu açıklamaya geçmeden önce, şimdi kullandığımız yerleşim yöntemlerinde neyin yanlış olduğunu bulalım.

Herhangi bir dizgici, bir şeyi dikey olarak hizalamanın veya kauçuk bir orta sütunla 3 sütunlu bir düzen oluşturmanın birkaç yolunu bilir. Ancak tüm bu yöntemlerin oldukça garip, bir hack'e benzer, her durumda uygun olmadığını, anlaşılması zor olduğunu ve tarihsel olarak gelişen belirli büyülü koşullar karşılanmazsa işe yaramadığını kabul edelim.

Bu, html ve css'nin evrimsel olarak evrimleşmesi nedeniyle oldu. Başlangıçta web sayfaları tek iş parçacıklı metin belgelerine benziyordu, kısa bir süre sonra sayfaların bloklara ayrılması tablolarla yapıldı, daha sonra float ile dizgi yapmak moda oldu ve ie6'nın resmi olarak ölümünden sonra satır içi blok teknikleri kullanılmaya başlandı. da eklendi. Sonuç olarak, mevcut tüm web sayfalarının %99,9'u için mizanpajlar oluşturmak için kullanılan tüm bu tekniklerin patlayıcı bir karışımını miras aldık.

Esnek bir kap içinde kutuların çok satırlı organizasyonu.

esnek sarma

Yukarıda verdiğimiz tüm örnekler, blokların tek satır (tek sütun) dizilimi dikkate alınarak oluşturulmuştur. Varsayılan olarak bir esnek konteynerin blokları her zaman bir satırda kendi içinde düzenleyeceği söylenmelidir. Ancak, belirtim ayrıca çok hatlı modu da destekler. flex-wrap CSS özelliği, bir esnek kap içindeki çok satırdan sorumludur.

Mevcut Değerler esnek sarma:

• şimdi rap (varsayılan): bloklar soldan sağa bir satırda düzenlenir (sağdan sola rtl olarak)
• sarma: bloklar birkaç yatay sıra halinde düzenlenir (bir sıraya sığmıyorlarsa). Birbirlerini soldan sağa takip ederler (sağdan sola rtl olarak)
• sarma-ters: ile aynı dürüm, ancak bloklar ters sırada.

flex-flow - Esnek yön + esnek sarma için kullanışlı stenografi

Aslında, esnek akış, ana eksenin yönünü ve çapraz eksenin çoklu çizgisini tek bir özellikte tanımlama yeteneği sağlar. Varsayılan olarak esnek akış: satır nowrap.

esnek akış:<‘flex-direction’> || <‘flex-wrap’>

CSS

/ * yani ... * / .my-flex-block (esnek yön: sütun; esnek sarma: sarma;) / * bu, ... * / .my-flex-blok ile aynıdır (esnek akış: sütun sarma ;)

hizalama içeriği

Ayrıca, sonuçta ortaya çıkan kutu sıralarının dikey olarak nasıl hizalanacağını ve esnek konteynerin tüm alanını nasıl bölüştürdüklerini belirleyen bir hizalama-içerik özelliği de vardır.

Önemli: hizalama içeriği yalnızca çok satırlı modda çalışır (yani, esnek sarma: sarma; veya esnek sarma: sarma-ters; durumunda)

Mevcut Değerler hizalama içeriği:

• esnek başlangıç: kutu sıraları esnek kabın başlangıcına doğru bastırılır.
• esnek uç: kutu sıraları esnek kabın sonuna doğru bastırılır
• merkez: kutu sıraları esnek kabın ortasındadır
• boşluk-arası: ilk blok sırası esnek konteynerin başında, son blok sırası sonunda, diğer tüm sıralar kalan boşlukta eşit olarak dağıtılır.
• boşluk-etrafında: Kutu sıraları, tüm boş alanı eşit olarak bölerek, esnek kabın başından sonuna kadar eşit aralıklarla yerleştirilir.
• uzatmak (varsayılan): Blok sıraları, mevcut alanı doldurmak için uzatılır.

Esnek sarma ve hizalama içeriği CSS özellikleri, alt öğelerine değil, doğrudan esnek kapsayıcıya uygulanmalıdır.

Esnekte çok satırlı özelliklerin demosu

Esnek kapsayıcı çocukları için CSS kuralları (esnek kutular)

esnek temel - tek bir esnek kutunun temel boyutu

Diğer esnek faktörlere dayalı dönüştürmeler uygulanmadan önce bir esnek kutu için ilk ana eksen boyutunu ayarlar. Herhangi bir uzunluk biriminde (px, em, %, ...) veya otomatik (varsayılan) belirtilebilir. Otomatik olarak ayarlanırsa, bloğun boyutu (genişlik, yükseklik) temel alınır ve bu da açıkça belirtilmediği takdirde içeriğin boyutuna bağlı olabilir.

esnek büyüme - tek bir esnek bloğun açgözlülüğü

Gerekirse, tek bir esnek kutunun kardeş öğelerden ne kadar daha büyük olabileceğini belirler. esnek büyüme birimsiz bir değer alır (varsayılan 0)

örnek 1:

• Bir esnek kap içindeki tüm esnek kutularda esnek büyüme: 1 varsa, bunlar aynı boyutta olacaktır.
• Bunlardan birinin flex-grow: 2'si varsa, diğerlerinden 2 kat daha büyük olacaktır.

Örnek 2:

• Bir esnek kap içindeki tüm esnek kutularda esnek büyüme: 3 varsa, bunlar aynı boyutta olacaktır
• Bunlardan biri esnek büyüme: 12'ye sahipse, diğerlerinden 4 kat daha büyük olacaktır.

Yani, esnek büyümenin mutlak değeri, tam genişliği belirlemez. Aynı seviyedeki diğer esnek kutularla ne kadar açgözlü olduğunu tanımlar.

flex-shrink - tek bir esnek bloğun "sıkıştırılabilirlik" faktörü

Yeterli boş alan yoksa, esnek kutunun içindeki komşu öğelere göre ne kadar küçüleceğini belirler. Varsayılan 1'dir.

flex - esnek büyüme, esnek küçültme ve esnek temel özellikleri için kısayol

esnek: yok | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

/ * yani ... * / .my-flex-block (flex-grow: 12; flex-shrink: 3; flex base: 30em;) / * bu, ... * / .my-flex-block ( esnek : 12 3 30em;)

Esnek büyüme, esnek küçültme ve esnek temel için demo

align-self - enine eksen boyunca tek bir esnek kutunun hizalanması.

Tek bir esnek kutu için hizalama öğeleri esnek kap özelliğini geçersiz kılmayı mümkün kılar.

Kendi kendine hizalama için mevcut değerler (hizalama öğeleriyle aynı 5 seçenek)

• esnek başlangıç: esnek kutu çapraz eksenin başlangıcına bastırılır
• esnek uç: esnek kutu çapraz eksenin ucuna bastırılır
• merkez: esnek kutular çapraz eksenin ortasına yerleştirilmiştir
• taban çizgisi: esnek kutu taban çizgisine göre hizalanmıştır
• uzatmak (varsayılan): esnek kutu, varsa minimum genişlik / maksimum genişliğe göre mevcut tüm çapraz eksen boşluğunu dolduracak şekilde uzanır.

sipariş - esnek bir kap içinde tek bir esnek kutunun sipariş edildiği sıra.

Varsayılan olarak, tüm bloklar html'de belirtilen sırayla birbirini takip edecektir. Ancak bu sıra order özelliği kullanılarak değiştirilebilir. Bir tamsayı olarak belirtilir ve varsayılan olarak 0'dır.

Sıra değeri, öğenin dizideki mutlak konumunu belirtmez. Öğenin konumunun ağırlığını belirler.

HTML

Bu durumda, bloklar ana eksen boyunca aşağıdaki sırayla birbiri ardına gelir: madde5, madde1, madde3, madde4, madde2

align-self ve order için demo

kenar boşluğu: otomatik dikey olarak... Hayaller Gerçekleşiyor!

Flexbox'ı, yalnızca kenar boşluğu boyunca olağan yatay hizalamanın burada da dikey olarak çalıştığı gerçeği için sevebilirsiniz: auto!

My-flex-container (ekran: esnek; yükseklik: 300 piksel; / * Veya her neyse * /) .my-flex-block (genişlik: 100 piksel; / * Veya her neyse * / yükseklik: 100 piksel; / * Veya her neyse * / kenar boşluğu: auto; / * Magic! Blok dikey ve yatay olarak ortalanır! * /)

Hatırlanacak şeyler

1. Flexbox'ı ihtiyacınız olmayan yerde kullanmamalısınız.
2. Çoğu durumda, sayfanın yapısına bağlı olarak bölgelerin tanımını yapmak ve içerik sırasını değiştirmek yine de yararlıdır. Bunu düşünmek.
3. Flexbox'ı anlayın ve temel bilgileri öğrenin. Bu, beklenen sonucu elde etmeyi çok daha kolay hale getirir.
4. Kenar boşluklarını unutmayın. Eksen hizalaması ayarlanırken bunlar dikkate alınır. Flexbox kenar boşluklarının normal akışta olduğu gibi “çökmediğini” hatırlamak da önemlidir.
5. Esnek kutuların kayan değeri yok sayılır ve alakasız. Bu muhtemelen bir şekilde flexbox'a geçerken zarif bozulma için kullanılabilir.
6. flexbox, web bileşenlerinin ve web sayfalarının ayrı bölümlerinin yerleşimi için çok uygundur, ancak temel yerleşimlerin yerleşimi (makalenin konumu, üstbilgi, altbilgi, gezinme çubuğu vb.) için iyi çalışmadı. Bu hala tartışmalı bir nokta, ancak bu makale oldukça ikna edici bir şekilde xanthir.com/blog/b4580'in eksikliklerini gösteriyor.

Nihayet

Flexbox'ın elbette diğer tüm yerleşim yöntemlerinin yerini almayacağını düşünüyorum, ancak elbette yakın gelecekte çok sayıda görevi çözerken değerli bir niş işgal edecek. Ve elbette, şimdi onunla çalışmayı denemelisin. Sonraki makalelerden biri, esnek düzen ile çalışmanın belirli örneklerine ayrılacaktır. haberlere abone ol ;)

Bu yazıda, esnek web sayfası düzenleri oluşturmak için CSS Flexbox teknolojisine bir göz atacağız.

CSS Flexbox'ın Amacı

CSS Flexbox esnek düzenler oluşturma... Bu teknoloji ile, kaptaki öğeleri çok basit ve esnek bir şekilde düzenleyebilir, mevcut alanı aralarında dağıtabilir ve belirli boyutları olmasa bile bunları şu veya bu şekilde hizalayabilirsiniz.

CSS Flexbox, duyarlı tasarımlar oluşturmayı Float ve Konumlandırma kullanmaktan çok daha kolay hale getirir.

Flexbox, tek tek blokların yanı sıra tüm sayfanın CSS düzeni için kullanılabilir.

CSS Flexbox için tarayıcı desteği

CSS Flexbox, şu anda kullanımda olan tüm modern tarayıcılar tarafından desteklenir (önekler kullanılarak: IE10 +, Edge12 +, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7 +) ...

CSS Flexbox Temelleri

Flexbox ile CSS oluşturma, gerekli HTML öğesini bir esnek veya esnek satır içi değerle görüntüleme CSS özelliğine ayarlayarak başlar.

Bundan sonra, bu öğe esnek bir kap haline gelir ve tümü acilçocuklar esnek öğelerdir. Aynı zamanda, flexbox hakkında konuştuğumuzda, sadece display: flex veya display: flex-inline ve tüm elementleri olan bir elementi kastediyoruz. direkt olarak içinde yer alır. Bu nedenle, CSS Flexbox'ta yalnızca iki tür öğe vardır: esnek kap ve esnek öğe.

Çoğu tarayıcı tarafından düzeni desteklemek için CSS'ye ön ek ve maksimum genişlik özellikleri eklenmiştir.

Satır sınıfı, bir bloğu esnek bir kaba "dönüştürmek" için kullanılır. Bir esnek kap içindeki .col__article ve .col__aside esnek öğelerinin genişliğini ayarlamak, esnek CSS özelliği kullanılarak yapılır.

Örnek olarak, flexbox kullanarak bir altbilgiyi işaretleyelim ve .col__article öğesinde üç öğeden oluşan bir blok oluşturalım (bir öğenin minimum genişliği 300 pikseldir). Altbilgiye dört blok yerleştirin (bir bloğun minimum genişliği 200 pikseldir).

FlexBox hakkında konuşmak istiyorum. Flexbox yerleşim modülü (esnek kutu, şu anda W3C Aday Önerisi), boyutları bilinmeyen ve/veya dinamik olsa bile (dolayısıyla "kelime" ) bir kaptaki öğeler arasında boş alan yerleştirmek, hizalamak ve dağıtmak için daha verimli bir yol sunmayı amaçlar. esnek").

Esnek yerleşimin ana fikri, konteynere, alanı daha iyi doldurmak için (çoğu durumda her türlü ekranı ve ekran boyutunu desteklemek için) öğelerinin genişliğini / yüksekliğini (ve sırasını) değiştirme yeteneği vermektir.Esnek bir kap, öğeleri boş alanı doldurmak için uzatır veya sınırların dışına çıkmalarını önlemek için küçültür.

En önemlisi, esnek kutu düzeni, geleneksel düzenlerin (dikey olarak giden kutular ve yatay olarak giden satır içi öğeler) aksine yönden bağımsızdır.Düzenli bir düzen, web sayfaları için harika olsa da, büyük veya karmaşık uygulamaları (özellikle ekran yönünü değiştirme, yeniden boyutlandırma, genişletme, küçültme vb. söz konusu olduğunda) destekleme esnekliğinden yoksundur..

Çünkü flexbox, yalnızca tek bir özellik değil, bütün bir modüldür, birçok özelliği bir araya toplar.Bunlardan bazıları kap (ana öğe, diğer adıyla esnek kap) için geçerliyken, diğer özellikler çocuklar veya esnek öğeler için geçerlidir.

Normal yerleşim, blok ve satır içi öğelerin akış yönlerine dayanırken, esnek yerleşim, "esnek akış yönlerine" dayanır.

esnek kutu

Temel olarak, elemanlar ya ana eksen boyunca (ana-başlangıçtan ana-uca) ya da enine eksen boyunca (çapraz-başlangıçtan çapraz uca) dağıtılacaktır.

ana eksen - Esnek öğelerin yerleştirildiği ana eksen.Lütfen yatay olması gerektiğini unutmayın, hepsi haklı içeriğin kalitesine bağlıdır.
ana başlangıç ​​| ana uç - esnek öğeler, ana başlangıç ​​konumundan ana uç konumuna kadar kaba yerleştirilir.
ana boyut - seçilen temel boyuta bağlı olarak esnek öğenin genişliği veya yüksekliği.Temel boyut, öğenin genişliği veya yüksekliği olabilir.
çapraz eksen - ana eksene dik enine eksen.Yönü, ana eksenin yönüne bağlıdır.
çapraz başlangıç ​​| çapraz uç - esnek çizgiler öğelerle doldurulur ve çapraz başlangıç ​​konumundan ve çapraz uç konumundan konteynere yerleştirilir.
çapraz boyut - seçilen boyuta bağlı olarak esnek öğenin genişliği veya yüksekliği bu değere eşittir.Bu özellik, seçilen boyuta bağlı olarak elemanın genişliği veya yüksekliği ile eşleşir.

Özellikler
ekran: esnek | satır içi esnek;

Bir esnek kap (seçilen değere göre satır içi veya blok) tanımlar, esnek bağlamı tüm yakın alt öğeleri için bağlar.

ekran: diğer değerler | esnek | satır içi esnek;

Aklında tut:

esnek kap ile çalışmıyor CSS sütun sütunlarıfloat, clear ve dikey hizalama esnek öğelerle çalışmaz

esnek yön

Esnek kapsayıcının üst öğesinden önce geçerlidir.

Ana ekseni ana eksene ayarlar, böylece kaba yerleştirilen esnek öğelerin yönünü belirler.

esnek yön: satır | sıra-ters | sütun | sütun-ters

satır (varsayılan): ltr için soldan sağa, rtl için sağdan sola;
satır-ters: ltr için sağdan sola, rtl için soldan sağa;
sütun: satırla aynı, yukarıdan aşağıya;
sütun-ters: Satır-ters gibi, aşağıdan yukarıya.

esnek sarma

Esnek kapsayıcının üst öğesinden önce geçerlidir.

Konteynerin tek hat mı yoksa çok hat mı olduğunu ve çapraz eksenin yönünü belirler, yeni hatların konumlanacağı yönü belirler.

esnek sarma: nowrap | sarma | ters sarma

nowrap (varsayılan): ltr için tek satır / soldan sağa, rtl için sağdan sola;
sarma: çok satırlı / ltr için soldan sağa, rtl için sağdan sola;
sarma-ters: çok satırlı / ltr için sağdan sola, rtl için soldan sağa.

esnek akış

Esnek kapsayıcının üst öğesinden önce geçerlidir.

Bu, birlikte ana ekseni ve çapraz ekseni tanımlayan esnek yön ve esnek sarma özelliklerinin kısaltmasıdır.Nowrap için varsayılan olarak sıralanır.

esnek akış< ‘flex-direction’> || < ‘Flex-wrap’>

haklı içerik

Esnek kapsayıcının üst öğesinden önce geçerlidir.

Ana eksene göre hizalamayı belirler.Çizginin öğelerinin "uzamaması" veya gerilmemesi, ancak zaten maksimum boyutlarına ulaşmış olması durumunda boş alan ayırmaya yardımcı olur.Ayrıca, satır dışına çıktıklarında öğelerin hizalanması üzerinde bir tür kontrol sağlar.

haklı içerik: esnek başlangıç ​​| esnek uç | merkez | boşluk | uzaylı

esnek başlangıç ​​(varsayılan): öğeler satırın başına kaydırılır;
esnek uç: öğeler satırın sonuna itilir;
merkez: öğeler satırın ortasına hizalanır;
boşluk-arasında: öğeler eşit aralıklarla yerleştirilir (ilk öğe satırın başında, son öğe sonundadır)
boşluk-etrafında: öğeler, kendi aralarında ve satırın dışında eşit aralıklarla eşit aralıklarla yerleştirilir.

haklı içerik
hizalama öğeleri

Esnek kapsayıcının üst öğesinden önce geçerlidir.

Esnek öğelerin geçerli satırdaki çapraz eksene göre nasıl konumlandırıldığına ilişkin varsayılan davranışı tanımlar.Bunu, yaslama içeriğinin eksenler arası versiyonları olarak düşünün (ana eksene dik).

hizalama öğeleri: esnek başlangıç ​​| esnek uç | merkez | temel | uzatmak

esnek başlangıç: öğeler için çapraz başlangıç ​​sınırı, çapraz başlangıç ​​konumunda bulunur;
esnek uç: çapraz uç konumunda bulunan öğeler için çapraz uç kenarlığı;
merkez: öğeler çapraz eksenin merkezine hizalanır;
taban çizgisi: öğeler taban çizgisine hizalanır;
streç (varsayılan): Öğeler, kabı doldurmak için gerilir (min-genişlik / maks-genişliğe göre).

hizalama öğeleri
hizalama içeriği

Esnek kapsayıcının üst öğesinden önce geçerlidir. Yaslama içeriğinin ana eksende yaptığına benzer şekilde, çapraz eksende boş alan olduğunda esnek kapsayıcının satırlarını hizalar. Not: Bu özellik, tek satırlı esnek kutularla çalışmaz.

hizalama içeriği: esnek başlangıç ​​| esnek uç | merkez | boşluk | uzay-etrafında | uzatmak

esnek başlangıç: çizgiler, kabın başlangıcına göre hizalanır;
esnek uç: çizgiler, kabın sonuna göre hizalanır;
merkez: çizgiler, kabın merkezine hizalanır;
space-between: satırlar eşit aralıklarla yerleştirilir (ilk satır satırın başında, son satır sonunda)
boşluk-etrafı: çizgiler eşit aralıklarla eşit aralıklarla yerleştirilir;
streç (varsayılan): Çizgiler boş alanı doldurmak için uzar.

hizalama içeriği
Emir

Varsayılan olarak, esnek öğeler orijinal sıralarına göre düzenlenir.Ancak order özelliği, bunların kapsayıcıya yerleştirildikleri sırayı kontrol edebilir.

sipariş 1

esnek büyüme

Alt öğe/esnek öğeden önce geçerlidir. Esnek bir öğenin gerektiği gibi "büyüme" yeteneğini belirler.Boyutsuz bir değer alır, orantı görevi görür.Elemanın kap içinde ne kadar boş alan alabileceğini belirler. Tüm öğelerin esnek büyümesi 1'e ayarlanmışsa, her çocuk kap içinde aynı boyutu alacaktır.Alt öğelerden birini 2'ye ayarlarsanız, diğerlerinden iki kat daha fazla yer kaplar.

esnek büyüme (varsayılan 0)

flex-shrink

Alt öğe/esnek öğeden önce geçerlidir.

Esnek bir öğenin gerektiği gibi küçülme yeteneğini belirler.

flex-shrink (varsayılan 1)

Negatif sayılar kabul edilmez.
esnek tabanlı

Alt öğe/esnek öğeden önce geçerlidir. Kapta yer ayırmadan önce öğenin varsayılan boyutunu belirler.

esnek tabanlı | otomatik (varsayılan otomatik)

esnek

Alt öğe/esnek öğeden önce geçerlidir. Bu, flex-grow, flex-shrink ve flex-temel için kısa yoldur.İkinci ve üçüncü parametreler (flex-shrink, flex-temel) isteğe bağlıdır.Varsayılan 0 1 otomatik'tir.

esnek: yok | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

kendini hizala

Alt öğe/esnek öğeden önce geçerlidir. Bireysel esnek öğeler için varsayılan hizalama veya hizalama öğelerini geçersiz kılmanıza olanak tanır. Kullanılabilir değerleri daha iyi anlamak için hizalama öğeleri özelliğinin açıklamasına bakın.

kendini hizala: otomatik | esnek başlangıç ​​| esnek uç | merkez | temel | uzatmak

Örnekleri
Hemen hemen her gün gerçekleşen çok, çok basit bir örnekle başlayalım: tam olarak merkeze hizalama.Flexbox'ı kullanmak daha kolay olamazdı.

Ebeveyn (ekran: esnek; yükseklik: 300 piksel;) .child (genişlik: 100 piksel; / * Yeterince iyi * / yükseklik: 100 piksel; / * İyi iyi * / kenar boşluğu: otomatik; / * Sihirli! * /)

Bu örnek, esnek kapsayıcının altındaki, auto olarak ayarlanmış kenar boşluğunun, fazladan boşluğu emdiği gerçeğine dayanmaktadır, bu nedenle, bu şekilde doldurma görevi, öğeyi her iki eksende tam olarak merkeze hizalayacaktır.Şimdi bazı özellikleri kullanalım.6 sabit boyutlu öğeden oluşan bir set (güzellik için), ancak kabı yeniden boyutlandırma özelliğine sahip olduğunu hayal edin.Tarayıcı penceresi yeniden boyutlandırıldığında her şeyin iyi görünmesi için bunları yatay olarak eşit bir şekilde dağıtmak istiyoruz (medya sorgusu yok!).

Flex-konteyner (
/ * Önce esnek bir bağlam oluşturun * /
ekran: esnek;

/ * Şimdi akışın yönünü ve öğeleri isteyip istemediğimizi tanımlayın
yeni bir satıra sarılmış
* Bunun aynı olduğunu unutmayın:
* Esnek yön: sıra;
* Esnek sarma: sarma;
* /
esnek akış: satır sarma;

/ * Şimdi alanın nasıl tahsis edileceğini tanımlayalım * /
}

Hazır. Diğer her şey bir kayıt meselesidir. Başka bir şey deneyelim.Sitemizin en üstünde sağa hizalanmış bir gezinme istediğimizi, ancak orta boyutlu ekranlar için merkeze hizalı olmasını ve küçük ekranlar için tek bir sütun olmasını istediğimizi hayal edin.Her şey yeterince basit.

/ * Büyük ekranlar * /
.navigasyon (
ekran: esnek;
esnek akış: satır sarma;
/ * Öğeleri ana eksen boyunca satırın sonuna kaydırır * /
haklı içerik: esnek uç;
}

medya tümü ve (maksimum genişlik: 800 piksel) (
.navigasyon (
/ * Orta büyüklükteki ekranlar için navigasyonu merkeze hizalıyoruz,
boş alanı öğeler arasında eşit olarak dağıtmak * /
justify-content: boşluk-etrafında;
}
}

/ * Küçük ekranlar * /
medya tümü ve (maksimum genişlik: 500 piksel) (
.navigasyon (
/ * Küçük ekranlarda satır yerine öğeleri bir sütuna koyarız * /
esnek yön: sütun;
}
}

Esnek öğelerin esnekliğiyle oynayalım!Tam genişlikte üstbilgi ve altbilgi içeren, mobil uyumlu üç sütunlu bir düzene ne dersiniz?Hem de farklı bir düzende.

sarıcı (
ekran: esnek;
esnek akış: satır sarma;
}

/ * Tüm Elemanları %100 genişliğe ayarla * /
.header, .main, .nav, .aside, .footer (
esnek %1100;
}

/ * Bu durumda, hedeflemek için orijinal sıraya güveniriz
* Mobil cihazlar:
* 1 başlık
* 2 gezinme
* 3 ana
* 4 kenara
* 5 altbilgi
* /

/ * Orta ekranlar * /
medya tümü ve (min-genişlik: 600 piksel) (
/ * Her iki kenar çubuğu da aynı satırda * /
.aside (esnek: 1 otomatik;)
}

/ * Büyük ekranlar * /

Kısacası, Flexbox ile yerleşim, bize bir zamanlar zor olan görevlere basit çözümler sunar. Örneğin, bir öğeyi dikey olarak hizalamanız veya ekranın altındaki alt bilgiye basmanız veya tüm boş alanı kaplamaları için bir satıra birkaç blok eklemeniz gerektiğinde. Benzer görevler esnek olmadan çözülebilir. Ancak bir kural olarak, bu çözümler daha çok "koltuk değneği" gibidir - css'yi başka amaçlar için kullanma püf noktaları. Flexbox'ta ise bu tür görevler tam olarak esnek modelin amaçlandığı şekilde çözülür.

CSS Esnek Kutu Düzen Modülü, kısaca flexbox, farklı genişlik ve yüksekliklere uyarlanmış olanlar da dahil olmak üzere çok çeşitli HTML yapılarının oluşturulmasındaki kusurları ortadan kaldırmak ve düzeni mantıklı ve basit hale getirmek için oluşturuldu. Mantıksal bir yaklaşım, kural olarak, sonucun test edilmediği beklenmedik yerlerde çalışır - mantık bizim her şeyimizdir!

Flexbox, bir kap içindeki öğelerin çok çeşitli özelliklerini zarif bir şekilde kontrol etmenize olanak tanır: yön, düzen, genişlik, yükseklik, uzunlamasına ve çapraz hizalama, boş alan dağılımı ve esneme ve küçültme öğeleri.

Temel bilgi

Bir FlexBox, bir Container ve öğelerinden (esnek öğeler) oluşur.

Flexbox'ı etkinleştirmek için herhangi bir HTML öğesinin display özelliğini css: flex; veya görüntüleme: satır içi esnek; ...

Esnek özelliği etkinleştirildikten sonra, kap içinde iki eksen oluşturulur: ana ve çapraz (dik (⊥), çapraz eksen). Tüm iç içe elemanlar (birinci seviye) ana eksen boyunca hizalanır. Varsayılan olarak, ana eksen yataydır ve soldan sağa bir yöne sahiptir (→) ve çapraz eksen sırasıyla dikeydir ve yukarıdan aşağıya doğru yönlendirilir (↓).

Ana ve çapraz eksenler değiştirilebilir, daha sonra elemanlar yukarıdan aşağıya yerleştirilir (↓) ve yüksekliğe sığmadıklarında soldan sağa hareket ederler (→) - yani eksenler basitçe değiştirilir. Bu durumda, elemanların düzenlenmesinin başlangıcı ve sonu değişmez - sadece yönler (eksenler) değişir! Bu yüzden konteynır içindeki eksenleri hayal etmeniz gerekiyor. Ancak bazı "fiziksel" eksenler olduğunu ve bunların bir şeyi etkilediğini düşünmemek gerekir. Buradaki eksen, sadece kabın içindeki elemanların hareket yönüdür. Örneğin, ana eksenin ortasındaki elemanların hizalamasını belirtmiş ve ardından bu ana eksenin yönünü değiştirmişsek, hizalama da değişecektir: elemanlar yatay olarak ortadaydı ve dikey olarak ortada oldu.. . Örneğe bakın.

Flex kutusunun bir diğer önemli özelliği de enine yönde sıraların bulunmasıdır. Ne hakkında konuştuğumuzu anlamak için, bir ana yatay eksen olduğunu, birçok öğe olduğunu ve kabın içine "tırmanmadıklarını", dolayısıyla başka bir sıraya geçtiğini düşünelim. Onlar. kap şöyle görünür: bir kap, içinde iki sıra vardır, her sıra birkaç öğe içerir. sundunuz mu? Şimdi yalnızca öğeleri değil, satırları da dikey olarak hizalayabileceğimizi unutmayın! Nasıl çalıştığı, mülkün örneğinde açıkça görülmektedir. Ve şematik olarak şöyle görünüyor:

Düzen modelini etkileyebilecek CSS özellikleri: kayan nokta, temizle, dikey hizalama, sütunlar esnek tasarımlarda çalışmaz. Düzeni oluşturmak için farklı bir model kullanır ve bu css özellikleri basitçe yok sayılır.

Flexbox CSS özellikleri

Flexbox, tüm esnek tasarımı kontrol etmek için farklı css kuralları içerir. Bazılarının ana konteynere, bazılarının ise bu konteynerin elemanlarına uygulanması gerekir.

Konteyner için

Görüntüle:

Öğe için flex özelliğini açar. Öğenin kendisi ve iç içe öğeleri bu özelliğin altına girer: yalnızca birinci düzey alt öğeler etkilenir - bunlar esnek kapsayıcının öğeleri haline gelir.

• esnek- eleman tüm genişliğine kadar uzanır ve çevredeki bloklar arasında tam alana sahiptir. Çizgiler bloğun başına ve sonuna sarılır.
• satır içi esnek- öğe diğer öğelerin etrafına sarılır. Aynı zamanda, iç kısmı bir blok eleman olarak biçimlendirilir ve elemanın kendisi satır içi olarak biçimlendirilir.

flex ve inline-flex, display:block ve display:inline-block gibi çevreleyen öğelerle farklı etkileşimde bulunmaları bakımından farklılık gösterir.

esnek yön:

Konteynerin ana ekseninin yönünü değiştirir. Enine eksen buna göre değişir.

• satır (varsayılan)- elemanların yönü soldan sağa (→)
• kolon- yukarıdan aşağıya elemanların yönü (↓)
• satır-ters- elemanların yönü sağdan sola (←)
• sütun-ters- elemanların aşağıdan yukarıya yönü ()

esnek sarma:

Kapsayıcı olmayan öğelerin transferini kontrol eder.

• Nowrap (varsayılan)- yuvalanmış elemanlar, konteynere yerleştirilip yerleştirilmediklerine bakılmaksızın bir satırda (yön = satır ile) veya bir sütunda (yön = sütun ile) düzenlenir.
• dürüm- konteynere sığmayan elemanların bir sonraki satıra aktarılmasını içerir. Bu, elemanların enine eksen boyunca hareketini açar.
• ters sarma- ayrıca sadece transferin sarılması aşağı değil, yukarı (ters yönde) olacaktır.

esnek akış: yön sarma

Hem esnek yön hem de esnek sarma özelliklerini birleştirir. Genellikle birlikte kullanılırlar, bu nedenle flex-flow özelliği daha az kod yazmak için oluşturulmuştur.

flex-flow, bir boşlukla ayrılmış bu iki özelliğin değerlerini kabul eder. Veya herhangi bir özellik için tek bir değer belirtebilirsiniz.

/ * yalnızca esnek yön * / esnek akış: satır; esnek akış: sıra-ters; esnek akış: sütun; esnek akış: sütun-ters; / * yalnızca esnek sarma * / esnek akış: nowrap; esnek akış: sarma; esnek akış: sarma-ters; / * aynı anda her iki değer: esnek yön ve esnek sarma * / esnek akış: satır şimdirap; esnek akış: sütun sarma; esnek akış: sütun-ters sarma-ters; haklı içerik:

Öğeleri ana eksen boyunca hizalar: yön = satır ise yatay ve yön = sütun ise dikey.

• esnek başlangıç ​​(varsayılan)- elemanlar baştan başlayacak (sonda boşluk olabilir).
• esnek uç- elemanlar sona hizalanır (başlangıçta boşluk kalır)
• merkez- ortada (solda ve sağda boşluk kalacak)
• arasındaki boşluk- uç elemanlar kenarlara bastırılır (elemanlar arasındaki boşluk eşit olarak dağıtılır)
• uzaylı- elemanlar arasında boş alan eşit olarak dağıtılır (aşırı elemanlar kenarlara bastırılmaz). Kabın kenarı ile en dıştaki elemanlar arasındaki boşluk, sıranın ortasındaki elemanlar arasındaki boşluğun yarısı olacaktır.
• boşluk eşit

hizalama içeriği:

Öğeleri içeren satırları çapraz eksen boyunca hizalar. Yalnızca karşı eksen için yaslama içeriği ile aynı.

Not: En az 2 satır olduğunda çalışır, yani. sadece 1 satır varsa, hiçbir şey olmaz.

Onlar. flex-direction: row ise bu özellik görünmez satırları dikey olarak hizalar ¦. Burada, bloğun yüksekliğinin katı bir şekilde ayarlanması ve sıraların yüksekliğinden daha büyük olması gerektiğine dikkat etmek önemlidir, aksi takdirde sıraların kendileri kabı gerer ve aralarında boş alan olmadığı için herhangi bir hizalama anlamını kaybeder. ... Ancak esnek yön: sütun olduğunda, satırlar yatay olarak hareket eder → ve kabın genişliği hemen hemen her zaman satırların genişliğinden daha büyüktür ve satırların hizalanması hemen anlamlıdır ...

• uzat (varsayılan)- satırlar çizgiyi tamamen dolduracak şekilde uzatılır
• esnek başlangıç- sıralar, kabın üst kısmında gruplandırılmıştır (sonda yer olabilir).
• esnek uç- satırlar kabın alt kısmında gruplandırılmıştır (başlangıçta boşluk kalacaktır)
• merkez- sıralar kabın ortasında gruplandırılmıştır (kenarlarda boşluk kalacaktır)
• arasındaki boşluk- dış sıralar kenarlara bastırılır (sıralar arasındaki boşluk eşit olarak dağıtılır)
• uzaylı- boş alan sıralar arasında eşit olarak dağıtılır (aşırı elemanlar kenarlara bastırılmaz). Kabın kenarı ile en dıştaki elemanlar arasındaki boşluk, sıranın ortasındaki elemanlar arasındaki boşluğun yarısı olacaktır.
• boşluk eşit- boşluk-etrafı ile aynıdır, sadece dış elemanlar ile kabın kenarları arasındaki mesafe elemanlar arasındaki ile aynıdır.

hizalama öğeleri:

Öğeleri bir satır (görünmez satır) içindeki çapraz eksen boyunca hizalar. Onlar. satırların kendileri hizalama içeriği yoluyla hizalanır ve bu satırların (çizgiler) içindeki öğeler hizalama öğeleri aracılığıyla ve tüm bunlar enine eksen boyunca hizalanır. Ana eksen boyunca böyle bir ayrım yoktur, satır kavramı yoktur ve öğeler yaslama içeriği ile hizalanır.

• uzat (varsayılan)- elemanlar çizgiyi tamamen doldurmak için gerilir
• esnek başlangıç- elemanlar satırın başına basılır
• esnek uç- elemanlar satırın sonuna kadar basılır
• merkez- elemanlar satırın ortasına hizalanır
• temel- öğeler metnin taban çizgisine hizalanır

Konteyner elemanları için

esnek büyüme:

Kapta boş alan olduğunda bir öğeyi büyütme faktörünü belirtir. Varsayılan olarak esnek büyüme: 0 yani öğelerin hiçbiri büyümemeli ve kaptaki boş alanı doldurmamalıdır.

Varsayılan esnek büyüme: 0

• Tüm öğeler flex-grow: 1 olarak ayarlandıysa, hepsi aynı şekilde uzar ve kaptaki tüm boş alanı doldurur.
• Öğelerden biri flex-grow: 1 olarak belirtilirse, kaptaki tüm boş alanı doldurur ve justify-content yoluyla hizalama artık çalışmaz: boş alan yok, hizalanacak hiçbir şey yok ...
• Esnek büyüme ile: 1. Bunlardan birinin flex-grow: 2'si varsa, diğerlerinden 2 kat daha büyük olacaktır.
• Bir esnek kap içindeki tüm esnek kutularda esnek büyüme: 3 varsa, bunlar aynı boyutta olacaktır
• Esnek büyüme ile: 3. Bunlardan biri esnek büyüme: 12'ye sahipse, diğerlerinden 4 kat daha büyük olacaktır.

Nasıl çalışır? Kapsayıcının 500 piksel genişliğinde olduğunu ve her birinin taban genişliği 100 piksel olan iki öğe içerdiğini varsayalım. Bu, kapta 300 serbest piksel olduğu anlamına gelir. Şimdi, eğer ilk eleman flex-grow olarak ayarlanmışsa: 2; ve ikinci esnek büyüme: 1; , ardından bloklar kabın tüm kullanılabilir genişliğini kaplayacak ve ilk bloğun genişliği 300 piksel ve ikinci 200 piksel olacaktır. Bu, kaptaki mevcut 300 piksel boş alanın öğeler arasında 2: 1, + 200 piksel birinci ve + 100 piksel ikinci oranında dağıtıldığı gerçeğiyle açıklanmaktadır.

Not: Değerde kesirli sayılar kullanabilirsiniz, örneğin: 0,5 - esnek büyüme: 0,5

flex-shrink:

Bir öğe için azaltma faktörünü belirtir. Esnek büyümenin tersi, kapta boşluk kalmadığında elemanın nasıl küçüleceğini belirler. Onlar. özellik, tüm öğelerin boyutlarının toplamı kabın boyutundan büyük olduğunda çalışmaya başlar.

Varsayılan esnek küçültme: 1

Kapsayıcının 600 piksel genişliğinde olduğunu ve her biri 300 piksel genişliğinde iki öğe içerdiğini varsayalım - esnek temel: 300 piksel; ... Onlar. iki eleman kabı tamamen doldurur. İlk öğe flex-shrink'tir: 2; , ve ikinci flex-shrink: 1; ... Şimdi kabın genişliğini 300 piksel azaltalım, yani. öğelerin kapsayıcıya sığması için 300 piksel küçülmesi gerekir. 2: 1 oranında küçülürler, yani. ilk blok 200 piksel ve ikincisi 100 piksel küçülecek ve yeni eleman boyutları 100 piksel ve 200 piksel olacaktır.

Not: Değerde kesirli sayılar kullanabilirsiniz, örneğin: 0,5 - esnek küçültme: 0,5

esnek temel:

Öğenin taban genişliğini ayarlar - öğenin genişliğini etkileyen diğer koşullar hesaplanmadan önceki genişlik. Değer px, em, rem,%, vw, vh vb. olarak belirtilebilir. Nihai genişlik, taban genişliğine ve esneme-büyüme, esneme-büzülme ve bloğun içindeki içeriğe bağlı olacaktır. auto ile öğeye, içindeki içeriğe göre bir taban genişliği verilir.

Varsayılan: otomatik

Bazen, tanıdık genişlik özelliği aracılığıyla bir öğenin genişliğini sabit kodlamak daha iyidir. Örneğin, genişlik: %50; kap içindeki öğenin tam olarak %50 olacağı anlamına gelir, ancak bu yine de esneme-büyüme ve esneme-büzülme özelliklerini çalışır durumda tutacaktır. Bu, öğe içindeki içerik tarafından belirtilen esnek temelin ötesine uzatıldığında yararlı olabilir. Bir örnek.

esneme ve küçültme temizlenmişse esnek temel "sert" olacaktır: esnek temel: 200 piksel; esnek büyüme: 0; flex-shrink: 0; ... Bütün bunlar şu şekilde yazılabilir: 0 0 200px; ...

flex: (büzülme tabanını büyüt)

Kısaca üç özellik: esneme-büyüme flex-büzülme flex-temel.

Varsayılan: esnek: 0 1 otomatik

Ancak, bir veya iki değer belirtebilirsiniz:

Esnek: yok; / * 0 0 otomatik * / / * sayı * / esnek: 2; / * esnek büyüme (esnek temel 0'a gider) * / / * sayı değil * / esnek: 10em; / * esnek temel: 10em * / esnek: 30 piksel; / * esnek temel: 30 piksel * / esnek: otomatik; / * esnek temel: otomatik * / esnek: içerik; / * esnek temel: içerik * / esnek: 1 30 piksel; / * esnek büyüme ve esnek temel * / esnek: 2 2; / * flex-grow ve flex-shrink (esnek-temel 0'a gider) * / esnek: 2 2 %10; / * flex-grow ve flex-shrink ve flex-temel * / align-self:

Yalnızca tek bir öğe için hizalama öğeleri özelliğini değiştirmenize olanak tanır.

Varsayılan: hizalama öğeleri kapsayıcısından

• uzatmak- eleman çizgiyi tamamen dolduracak şekilde gerilir
• esnek başlangıç- eleman satırın başına basılır
• esnek uç- eleman satırın sonuna kadar basılır
• merkez- eleman çizginin ortasına hizalanır

temel- öğe metnin satır taban çizgisine hizalanır

Emir:

Ortak bir satırdaki bir elemanın sırasını (konumunu, konumunu) değiştirmenizi sağlar.

Varsayılan: sipariş: 0

Varsayılan olarak, öğeler order: 0'a sahiptir ve HTML kodundaki görünüm sırasına ve satırın yönüne göre yerleştirilir. Ancak order özelliğinin değerini değiştirirseniz, elemanlar değerler sırasına göre düzenlenir: -1 0 1 2 3 .... Örneğin, öğelerden birine sıra: 1 belirtirseniz, önce tüm sıfırlar ve ardından 1'li öğe gelir.

Yani örneğin diğer öğelerin veya HTML kodunun hareket yönünü değiştirmeden ilk öğeyi sona atabilirsiniz.

Notlar

Esnek temel ve genişlik arasındaki fark nedir?

Esnek temel ve genişlik / yükseklik arasındaki önemli farklar aşağıdadır:

esnek temel yalnızca ana eksen için çalışır. Bu, flex-direction: row flex-basis ile genişliği kontrol ettiği ve flex-direction: sütun ile yüksekliği kontrol ettiği anlamına gelir. ...

esnek temel yalnızca esnek öğeler için geçerlidir. Bu, kaptaki esnekliği kapatırsanız, bu özelliğin hiçbir etkisi olmayacağı anlamına gelir.

Mutlak kap öğeleri esnek tasarıma katılmaz ... bu, esnek temelin, mutlak konumda oldukları sürece esnek kap öğelerini etkilemediği anlamına gelir: mutlak. Genişlik / yükseklik belirtmeleri gerekecek.

• Flex 3 özelliği kullanılırken değerler (flex-grow / flex-shrink / flex-basis) birleştirilip kısaca yazılabilirken genişlik büyüme veya küçülme ayrı yazılmalıdır. Örneğin: esnek: 0 0 %50 == genişlik: %50; flex-shrink: 0; ... Bazen sadece uygunsuz.

Mümkün olduğunda esnek temeli tercih edin. Genişliği yalnızca esnek temel uygun olmadığında kullanın.

Esnek temel genişlikten farklı mı - bir hata mı yoksa bir özellik mi?

Esnek öğenin içindeki içerik onu genişletir ve dışına çıkamaz. Bununla birlikte, genişliği genişlik veya maksimum genişlik aracılığıyla ayarlarsanız ve esnek temel değil, esnek kabın içindeki öğe bu kabın ötesine geçebilir (bazen bu davranışa ihtiyaç duyarsınız). Örnek:

Esnek düzen örnekleri

Örnekler, tarayıcılar arası uyumluluk için hiçbir zaman önek kullanmaz. Bunu css'in kolay okunması için yaptım. Bu nedenle, örnekler için Chrome veya Firefox'un en son sürümlerine bakın.

# 1 Dikey ve yatay hizalama ile basit örnek

En basit örnekle başlayalım - aynı anda ve herhangi bir blok yüksekliğinde dikey ve yatay olarak hizalama, hatta lastik.

Veya bunun gibi, içinde bir blok olmadan:

# 1.2 Esnek blok elemanları arasında ayırma (boşluk)

Kabın öğelerini kenarlar boyunca konumlandırmak ve ardından bir kesinti olacak öğeyi keyfi olarak seçmek için, sol kenar boşluğu: auto veya kenar boşluğu: otomatik özelliğini kullanmanız gerekir.

# 2 duyarlı esnek menü

Sayfanın en üstünde bir menü yapalım. Geniş ekranda, sağda olmalıdır. Ortalama olarak, ortada hizalayın. Ve küçük olanda, her öğe yeni bir satırda olmalıdır.

# 3 Duyarlı 3 Sütun

Bu örnek, daraltıldığında 2'ye ve ardından 1'e dönüşecek olan 3 sütun yapmanın ne kadar hızlı ve kolay olduğunu göstermektedir.

Lütfen bunu medya kurallarını kullanmadan yapabileceğinizi unutmayın, her şey esnektir.

jsfiddle.net'e gidin ve "sonuç" bölümünün genişliğini değiştirin

# 4 esnek kutu

Diyelim ki bir büyük ve iki küçük olmak üzere 3 blok göstermemiz gerekiyor. Bu durumda blokların küçük ekranlara uyum sağlaması gerekir. Yaparız:

jsfiddle.net'e gidin ve "sonuç" bölümünün genişliğini değiştirin

# 5 Esneklik ve geçiş üzerine galeri

Bu örnek, resimlerle ne kadar hızlı güzel bir esnek akordeon yapabileceğinizi gösterir. Flex için geçiş özelliğine dikkat edin.

# 6 Esnemek için esnetin (sadece bir örnek)

Görev esnek bir blok yapmaktır. Böylece her bloktaki metnin başlangıcı aynı yatay çizgi üzerinde olur. Onlar. genişlik daraldıkça, blokların yüksekliği büyür. Resmin üstte olması, düğmenin her zaman altta olması ve ortadaki metnin bir yatay çizgi boyunca başlaması gerekir ...

Bu sorunu çözmek için blokların kendileri esnek bir şekilde gerilir ve onlar için mümkün olan maksimum genişlik ayarlanır. Her bir iç blok, aynı zamanda, döndürülmüş esnek yöne sahip esnek bir yapıdır: sütun; ve ortadaki eleman (metnin olduğu yer) gerilir flex-grow: 1; tüm boş alanı doldurmak için sonuç bu şekilde elde edilir - metin bir satırda başladı ...

Daha fazla örnek

Tarayıcı desteği - %98,3

Elbette tam destek yoktur, ancak tüm modern tarayıcılar flexbox yapılarını destekler. Bazıları için öneklerin hala belirtilmesi gerekir. Gerçek bir resim için caniuse.com'a bir göz atalım ve bugün kullanılan tarayıcıların %96,3'ünün ön eksiz, %98,3'lük ön ek ile çalışacağını görelim. Bu, flexbox'ı güvenle kullanmak için harika bir göstergedir.

Bugün hangi öneklerin alakalı olduğunu bilmek için (Haziran 2019), tüm esnek kurallara bir örnek vereceğim. gerekli ön ekler:

/ * Container * / .flex (ekran: -webkit-box; ekran: -ms-flexbox; ekran: esnek; ekran: -webkit-inline-box; ekran: -ms-inline-flexbox; ekran: satır içi-flex; -webkit-box-orient: dikey; -webkit-box-yön: normal; -ms-flex-yön: sütun; esnek yön: sütun; -ms-flex-wrap: sarma; esnek sarma: sarma; -ms -flex-flow: sütun sarma; esnek akış: sütun sarma; -webkit-box-pack: yasla; -ms-flex-pack: yasla; yasla-içerik: boşluk-arası; -ms-flex-line-pack: dağıt; hizala-içerik: boşluk-etrafında;) / * Öğeler * / .flex-item (-webkit-box-flex: 1; -ms-flex-pozitif: 1; flex-grow: 1; -ms-flex- negatif: 2; flex-shrink: 2; -ms-flex-tercih edilen-size: 100px; flex-basis: 100px; -ms-flex: 1 2 100px; flex: 1 2 100px; -ms-flex-item-align : merkez; kendini hizala: merkez; -webkit-kutusu-sıralı-grup: 3; -ms-esnek-sıra: 2; sıra: 2;)

Ön ekli özelliklerin orijinal özelliğin önüne geçmesi daha iyidir.
Bu listede bugün için gereksiz önekler yoktur (caniuse ile), ancak genel olarak daha fazla önek vardır.

Krom	Safari	Firefox	Opera	IE	Android	iOS
20- (eski)	3.1+ (eski)	2-21 (eski)		10 (ara doldurucu)	2.1+ (eski)	3.2+ (eski)
21+ (yeni)	6.1+ (yeni)	22+ (yeni)	12.1+ (yeni)	11+ (yeni)	4.4+ (yeni)	7.1+ (yeni)

• (yeni) - yeni sözdizimi: display: flex; ...
• (tweener) - eski resmi olmayan 2011 sözdizimi: display: flexbox; ...
• (eski) - 2009'dan eski sözdizimi: display: box;

Video

Eh, videoyu unutma, bazen orada da ilginç ve anlaşılır. İşte birkaç popüler olan:

Faydalı Esnek Bağlantılar

flexboxfroggy.com eğitici bir flexbox oyunudur.

Flexplorer, sezgisel bir esnek kod oluşturucudur.