Flexbox elemanlarının düzenlenmesi. FlexBox'ın pratik uygulaması. #4 Esneklik kullanan uyarlanabilir bloklar

yazar hakkında: Rachel Andrew sadece Smashing Magazine'in genel yayın yönetmeni değil, aynı zamanda bir web geliştiricisi, yazarı ve konuşmacısıdır. Dahil olmak üzere çok sayıda kitabın yazarıdır. Yeni CSS Düzeni Perch içerik yönetim sisteminin geliştiricilerinden biri. Rachelandrew.co.uk adlı web sitesinde iş ve teknoloji hakkında yazıyor.

Özet: Bu makalede, Flexbox'taki hizalama özelliklerine ve ana ve çapraz eksen boyunca hizalamanın nasıl çalıştığına ilişkin bazı temel kurallara bakacağız.

Değerler dikey olarak da aynı şekilde çalışır, yani sütuna esnek yön uygulandığında. Doğru, bu demoda olduğu gibi konteynere yükseklik veya blok boyutu eklemezseniz dağıtım için sütunda boş alanınız olmayabilir.

Hizalama içeriğini kullanarak eksen hizalaması

Kapta birden fazla eksen varsa ve flex-wrap: sarma belirtilirse, çapraz eksendeki satırları hizalamak için align-content kullanılabilir. Ancak ek alan gereklidir. Bu demoda çapraz eksen sütun yönünde çalışıyor ve konteynerin yüksekliğini 60vh olarak belirledim. Bu, tüm öğelerin görüntülenmesi için gerekenden daha fazla olduğundan, boş dikey alan vardır.

Daha sonra align-content'i herhangi biriyle uygulayabilirim.

Esnek yön sütun ise hizalama içeriği aşağıdaki örnekteki gibi çalışır.

Justify-content'te olduğu gibi, bir grup satırla çalışıyoruz ve boş alan ayırıyoruz.

Yer içeriğine göre mülk

Kutu Hizalama spesifikasyonunda yer içeriği özelliğini bulabilirsiniz. Bu özelliği kullanmak, yaslama içeriğini ve hizalama içeriğini aynı anda ayarladığınız anlamına gelir. İlk değer align-content içindir, ikincisi ise justify-content içindir. Yalnızca bir değer belirtilirse bu her iki özelliğe de uygulanır:

Konteyner ( yer-içerik: boşluk-aradaki streç; )
Buna karşılık gelir:

Kapsayıcı (hizalama-içerik: aradaki boşluk; yaslama-içerik: uzatma; )
Ve bu kod:

Kapsayıcı ( yer-içerik: boşluk-aradaki; )
Aşağıdakilere eşdeğerdir:

Kapsayıcı ( hizalama içeriği: aradaki boşluk; içeriği yaslamak: aradaki boşluk; )

Hizalama öğelerini kullanarak eksen hizalaması

Artık bir dizi öğeyi veya satırı grup olarak hizalayabileceğimizi biliyoruz. Bununla birlikte, elemanları birbirine göre enine eksende hizalamanın başka bir yolu vardır. Bir konteynerin en yüksek elemanın yüksekliğine göre belirlenen bir yüksekliği vardır.

Alternatif olarak kaptaki height özelliğiyle de tanımlanabilir:

Öğelerin en uzun öğenin boyutuna kadar uzatılmasının nedeni, align-items parametresinin başlangıç değerinin Stretch olmasıdır. Elemanlar enine eksen boyunca o yönde kabın boyutuna kadar gerilir.

Çok hatlı bir kapta her satırın yeni bir kap görevi gördüğünü unutmayın. Bu satırdaki en uzun öğe, o satırdaki tüm öğelerin boyutunu belirleyecektir.

Stretch başlangıç değerine ek olarak, align-item'leri flex-start olarak ayarlayabilirsiniz; bu durumda bunlar kabın başlangıcına hizalanır ve artık yükseklik olarak esnemezler.

Esnek uç değeri bunları çapraz eksen boyunca kabın sonuna taşır.

Değer merkezini kullanırsanız öğeler birbirine göre ortalanır:

Bunları taban çizgisine de hizalayabiliriz. Bu, metnin etrafındaki kenar boşluklarını hizalamak yerine metnin aynı tabana hizalanmasını sağlar.

Tüm bu seçenekler demoda denenebilir.

Hizalama-kendisi ile özel hizalama

align-items özelliği tüm elemanların aynı anda hizalanmasını belirtir. Aslında grubun tüm elemanları için align-self değerlerini ayarlar. Ayrıca herhangi bir öğeyi bir çizgi içinde ve diğer öğelere göre hizalamak için align-self özelliğini kullanabilirsiniz.

Aşağıdaki örnek, tüm grubu ortalamak için kapsayıcıdaki align-item'ları kullanır, ancak aynı zamanda ilk ve son öğeler için align-self'i kullanır.

Neden haklı-benlik yok?

Bir öğeyi veya öğe grubunu ana eksen boyunca hizalamanın neden mümkün olmadığı sorusu sıklıkla ortaya çıkar. Flexbox'ta neden ana eksen hizalaması için -self özelliği yok? İçeriği yaslama ve içeriği hizalamanın alan ayırmanın bir yolu olduğunu düşünüyorsanız, cevap daha açık hale gelir. Öğeleri bir grup olarak ele alıyoruz ve boş alanı belirli bir şekilde yerleştiriyoruz: grubun başına veya sonuna ya da öğelerin arasına.

CSS Izgara Düzeninde içeriği iki yana yaslama ve içeriği hizalama özelliklerinin nasıl çalıştığını düşünmek de yararlı olabilir. Grid'de bu özellikler, ızgara kapsayıcısında boş alan tahsis etmek için kullanılır. ızgara izleri arasında. Burada da bir grup parça alıyoruz ve bu özellikleri kullanarak aralarında boş alan dağıtıyoruz. Hem Grid hem de Flexbox'ta grup halinde çalıştığımız için tek bir elemanı alıp onunla farklı bir şey yapamayız. Ancak, ana eksende öz özellikten bahsederken yerleşim tasarımcılarının istediği yerleşim tasarımını elde etmenin bir yolu var. Bu, otomatik alanların kullanımıdır.

Birincil Eksende Otomatik Kenar Boşluklarını Kullanma

CSS'de bir bloğu ortaladıysanız (örneğin, sol ve sağ kenar boşluklarını otomatik olarak ayarlayarak ana sayfa içeriği için bir sarmalayıcı), otomatik kenar boşlukları konusunda zaten bir miktar deneyiminiz var demektir. Kenar boşlukları için auto değeri, belirtilen yönde mümkün olduğu kadar fazla alanı doldurur. Bloğu ortalamak için hem sol hem de sağ kenar boşluklarını otomatik olarak ayarlıyoruz: her biri mümkün olduğunca fazla yer kaplamaya çalışıyor ve bu nedenle bloğumuzu merkeze yerleştiriyoruz.

Otomatik kenar boşlukları, tek tek öğeleri veya öğe gruplarını ana eksende hizalamak için Flexbox'ta çok iyi çalışır. Aşağıdaki örnek tipik bir durumu göstermektedir. Bir gezinme çubuğu vardır, öğeler bir dize olarak görüntülenir ve justify-content: start başlangıç değerini kullanır. Satırda bunun gerçekleşmesi için yeterli alan olması koşuluyla, son öğenin satırın sonunda diğerlerinden ayrı olarak görünmesini istiyorum.

Bu elemanı alıyoruz ve marj-sol özelliğini auto olarak ayarlıyoruz. Bu, kutunun öğenin solunda mümkün olduğu kadar fazla yer açmaya çalıştığı, yani öğenin sağ kenara itildiği anlamına gelir.

Ana eksende otomatik kenar boşlukları kullanırsanız, justify-content artık etkili olmayacaktır çünkü otomatik kenar boşlukları, aksi takdirde justify-content kullanılarak tahsis edilecek tüm alanı kaplayacaktır.

Yedek hizalama

Her hizalama yöntemi için bir geri dönüş açıklanır; belirtilen hizalama mümkün değilse ne olur? Örneğin, bir kapsayıcıda yalnızca bir öğeniz varsa ve justify-content: space-between belirtirseniz ne olmalıdır? Bu durumda esnek başlangıç geri dönüş hizalaması uygulanır; bir öğe kabın başlangıcına hizalanır. Justify-content: space-around durumunda, geri dönüş hizalaması center olur.

Mevcut spesifikasyonda geri dönüş hizalamasını değiştiremezsiniz. Gelecek sürümlerde isteğe bağlı bir geri dönüş belirleme olanağına izin veren bir özellik notu bulunmaktadır.

Güvenli ve Güvensiz Hizalama

Kutu Hizalama spesifikasyonuna yeni eklenen, anahtar kelimeler kullanılarak güvenli ve güvensiz hizalama kavramıdır güvenli Ve güvensiz.

Aşağıdaki kodda, son öğe kapsayıcı için çok geniş ve güvenli olmayan bir hizalama ve sayfanın sol tarafında esnek bir kapsayıcı ile taşma sayfa sınırlarının dışına taştığı için öğe kesiliyor.

Container ( display: flex; flex-direction: sütun; genişlik: 100 piksel; hizalama öğeleri: güvenli olmayan merkez; ) .item:last-child ( width: 200px; )

Güvenli hizalama, taşmayı diğer tarafa taşıyarak veri kaybını önler.

Kapsayıcı ( ekran: esnek; esnek yön: sütun; genişlik: 100 piksel; hizalama öğeleri: güvenli merkez; ) .item: son çocuk ( genişlik: 200 piksel; )

Bu anahtar kelimeler henüz tüm tarayıcılar tarafından desteklenmemektedir ancak Kutu Hizalama spesifikasyonlarının Flexbox'a nasıl kontrol eklediğini göstermektedir.

Çözüm

Hizalama özellikleri Flexbox'ta bir liste olarak başladı ancak artık kendi spesifikasyonlarına sahipler ve diğer düzen bağlamlarına da uygulanıyorlar. Flexbox'ta bunların kullanımını hatırlamanıza yardımcı olacak birkaç önemli bilgiyi burada bulabilirsiniz:

ana eksenler için gerekçelendirin ve enine eksenler için hizalayın;
içeriği hizala ve içeriği yasla, boş alan gerektirir;
align-content ve justify-content özellikleri gruptaki öğelere uygulanır ve aralarındaki boşluk dağıtılır. -self özelliği eksik olduğundan tek bir öğenin hizalamasını belirtemezsiniz;
bir öğeyi hizalamak veya bir grubu ana eksen boyunca bölmek istiyorsanız otomatik alanları kullanın;
align-items tüm grup için aynı align-self özelliklerini ayarlar. Değerini ayrı ayrı ayarlamak için bir grubun alt öğesi üzerinde align-self kullanın.

İçerik:

Esnek Kutu sayfada blokları düzenlemenin yeni bir yoludur. Bu, şamandıraların aksine, elemanların yerleştirilmesi için özel olarak oluşturulmuş bir teknolojidir. Kullanarak Esnek KutuÖğeleri yatay ve dikey olarak kolayca hizalayabilir, öğelerin görüntülenme yönünü ve sırasını değiştirebilir, blokları üst öğenin tam yüksekliğine kadar uzatabilir veya alt kenara çivileyebilirsiniz.

02/02/2017 tarihli güncelleme: Flexbox'ta canlı demolar ve teknik özelliklerdeki açıklamalarla kullanışlı bir kopya sayfası hazırladım: Flexbox kopya kağıdı.

Örneklerde yalnızca yeni sözdizimi kullanılmaktadır. Yazma sırasında, en doğru şekilde görüntülenirler. Krom. Firefox'ta kısmen çalışıyorlar, Safari'de ise hiç çalışmıyorlar.

caniuse.com'a göre, Esnek Kutu IE 8 ve 9 ile Opera Mini tarafından desteklenmez ve diğer tarayıcılarda tüm özellikler desteklenmez ve/veya önekler gereklidir.

Bu, teknolojinin şu anda yaygın olarak kullanılamayacağı ancak şimdi onu daha iyi tanımanın zamanı olduğu anlamına geliyor.

Öncelikle esnek elemanların eksenler boyunca düzenlendiğini bilmeniz gerekir. Varsayılan olarak öğeler yatay olarak düzenlenir ana eksen- ana eksen.

Ayrıca kullanırken şunu da unutmamak gerekir: Esnek Kutu float , clear ve dikey hizalama dahili bloklar ve ayrıca metindeki sütunları belirten özellikler için çalışmaz.

Deneyler için bir test alanı hazırlayalım:

Bir ana blok (sarı) ve 5 alt blok.

Ekran:esnek

Şimdi ana öğeye display: flex; ekliyoruz. . İç div'ler içerikten bağımsız olarak aynı yükseklikteki sütunlarla (ana eksen boyunca) sıralanır.

ekran: esnek; Başlangıçta olduğu gibi satır içi veya blok tabanlı olmak yerine tüm alt öğeleri esnek hale getirir.

Ana blok sarmalayıcı olmayan resimler veya metin içeriyorsa bunlar anonim esnek öğeler haline gelir.

Şunun için özelliği göster: Esnek Kutu iki anlam alabilir:

flex - bir blok elemanı gibi davranır. Blokların genişliği hesaplanırken düzen önceliklidir (blokların yeterince geniş olmaması durumunda içerik sınırların dışına taşabilir).

inline-flex - satır içi blok gibi davranır. İçeriğin önceliği vardır (içerik, mümkünse satırların sığması için blokları gereken genişliğe yayar).

Esnek yön

Blok düzeninin yönü flex-direction özelliği tarafından kontrol edilir.

Olası değerler:

satır - satır (varsayılan değer); row-reverse - öğelerin ters sırada olduğu bir satır; sütun - sütun; sütun-ters - öğeleri ters sırada içeren bir sütun.

satır ve satır tersi

sütun ve sütun tersi

Esnek sarma

Bir satırda birçok blok olabilir. Sarılıp sarılmayacakları flex-wrap özelliği ile belirlenir.

Olası değerler:

nowrap - bloklar aktarılmaz (varsayılan değer); sarma - bloklar aktarılır; sarma-ters - bloklar ters sırada sarılır ve düzenlenir.

Esnek yön ve esnek sarma özelliklerinin kısaltması için bir özellik vardır: flex-flow.

Olası değerler: her iki özelliği veya yalnızca birini ayarlayabilirsiniz. Örneğin:

esnek akış: sütun; esnek akış: sarma-tersine; esnek akış: sütun ters sarma;

Satır-ters sarma-tersine çevirme demosu:

Emir

Blokların sırasını kontrol etmek için order özelliğini kullanın.

Olası değerler: sayılar. Bloğu ilk sıraya koymak için şu sırayı verin: -1:

Yasla-içerik

Öğeleri hizalamak için çeşitli özellikler vardır: justify-content, align-items ve align-self.

justify-content ve align-items ana konteynere uygulanır, align-self çocuklara uygulanır.

justify-content ana eksen hizalamasından sorumludur.

Yaslanmış içerik için olası değerler:

flex-start - öğeler ana eksenin başlangıcından itibaren hizalanır (varsayılan değer); esnek uç - elemanlar ana eksenin ucundan hizalanır; merkez - öğeler ana eksenin merkezine hizalanır; aradaki boşluk - elemanlar ana eksen boyunca hizalanarak boş alanı kendi aralarında dağıtır; etrafındaki boşluk - öğeler ana eksen boyunca hizalanarak etraflarındaki boş alanı dağıtır.

esnek başlangıç ve esnek bitiş

aradaki boşluk, etrafındaki boşluk

Öğeleri hizala

align-items dikey eksen boyunca hizalamadan sorumludur.

Olası hizalama öğeleri değerleri:

esnek başlangıç - öğeler dikey eksenin başlangıcından itibaren hizalanır; esnek uç - elemanlar dikey eksenin ucundan hizalanır; merkez - elemanlar merkezde hizalanmıştır; taban çizgisi - öğeler taban çizgisi boyunca hizalanır; germe - elemanlar dikey eksen boyunca tüm alanı kaplayacak şekilde gerilir (varsayılan değer).

esnek başlangıç, esnek bitiş

temel çizgi, uzatma

Kendini hizala

align-self aynı zamanda dikey hizalamadan da sorumludur, ancak bireysel esnek öğelere ayarlanmıştır.

Hizalama-kendisi için olası değerler:

otomatik varsayılan değerdir. Öğenin ana öğenin hizalama öğelerini kullandığını belirtir; esnek başlangıç - öğe dikey eksenin başlangıcından itibaren hizalanır; esnek uç - eleman dikey eksenin ucundan hizalanır; merkez - eleman merkeze hizalanmıştır; taban çizgisi - öğe taban çizgisi boyunca hizalanır; germe - eleman tüm yükseklik alanını kaplayacak şekilde gerilir.

İçeriği hizala

Çok satırlı esnek bir kap içindeki hizalamayı kontrol etmek için align-content özelliği vardır.

Olası değerler:

esnek başlangıç - öğeler ana eksenin başlangıcından itibaren hizalanır; esnek uç - elemanlar ana eksenin ucundan hizalanır; merkez - öğeler ana eksenin merkezine hizalanır; aradaki boşluk - elemanlar ana eksen boyunca hizalanarak boş alanı kendi aralarında dağıtır; etrafındaki boşluk - öğeler ana eksen boyunca hizalanarak etraflarındaki boş alanı dağıtır; streç - elemanlar tüm yüksekliği dolduracak şekilde uzatılır (varsayılan değer).

esnek başlangıç, esnek bitiş

merkez, uzatma

aradaki boşluk, etrafındaki boşluk

Not: Bazı şeyleri çalışırken göremedim, örneğin flex-flow: sütun sarma satırı veya aynı flex-direction: sütununun tam girişi; esnek sarma: sarma; .

Öğeler bir sütunda durur ancak aktarılmaz:

sarma, flex-direction: sütun ile çalışmaz; , teknik özelliklerde şöyle görünmesine rağmen:

Zamanla işe yarayacağını düşünüyorum.

21.06.2014 tarihli güncelleme: blok yüksekliğini ayarlarsanız her şey çalışır. Bahşiş için teşekkürler

CSS Flexbox'ın Tam Kılavuzu. Bu eksiksiz kılavuz, ana öğenin (esnek kapsayıcı) ve alt öğelerin (esnek öğeler) tüm olası özelliklerine odaklanarak flexbox hakkındaki her şeyi açıklar. Aynı zamanda geçmişi, demoları, şablonları ve bir tarayıcı destek tablosunu da içerir.

Arka plan

flex-flow (Geçerli olduğu yerler: esnek konteynerin ana öğesi)

Bu, şunun kısaltmasıdır: esnek yön Ve esnek ambalaj esnek kabın ana ve enine eksenlerini birlikte tanımlayan özellikler. Varsayılan değer: satır şimdi rap.

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

iki yana yaslı içerik

Bu özellik ana eksen boyunca hizalamayı belirler. Bir sıradaki tüm esnek öğeler esnek olmadığında veya esnek olduğu halde maksimum boyutlarına ulaştığında, kalan ekstra boş alanın dağıtılmasına yardımcı olur. Bu aynı zamanda çizgiyi taşan elemanların hizalanması üzerinde de bir miktar kontrol sağlar.

esnek başlangıç(varsayılan): öğeler esnek yön yönünün başlangıcına kaydırılır.
esnek uçlu: Elemanlar esneme yönünün sonuna doğru hareket ettirilir.
başlangıç: öğeler başlangıca taşınır yazma modu talimatlar.
son: öğeler sonda kaydırılır yazma modu talimatlar.
sol: eğer bu mantıklı değilse öğeler kabın sol kenarına doğru kaydırılır esnek yön sonra şöyle davranır başlangıç.
Sağ: eğer bu mantıklı değilse öğeler kabın sağ kenarına doğru kaydırılır esnek yön sonra şöyle davranır başlangıç.
merkez: öğeler çizgi boyunca ortalanmıştır
arasındaki boşluk: elemanlar çizgi boyunca eşit olarak dağıtılmıştır; ilk eleman satırın başında, son eleman ise satırın sonundadır
uzay çevresinde: Öğeler, etraflarında eşit boşluk olacak şekilde bir çizgi boyunca eşit aralıklarla yerleştirilmiştir. Tüm öğelerin her iki tarafta da aynı alana sahip olması nedeniyle görsel olarak boşlukların eşit olmadığını unutmayın. İlk eleman kabın kenarına karşı bir birim boşluğa sahip olacaktır, ancak sonraki eleman arasında iki birim boşluğa sahip olacaktır çünkü bir sonraki elemanın uygulanan kendi aralığı vardır.
eşit aralıkta: Elemanlar, herhangi iki eleman arasındaki mesafe (ve kenarlara olan mesafe) aynı olacak şekilde dağıtılır.

Lütfen bu değerlere yönelik tarayıcı desteğinin kendi nüanslarına sahip olduğunu unutmayın. Örneğin, arasındaki boşluk hiçbir zaman Edge desteği almadım ve başlangıç/bitiş/sol/sağ henüz Chrome'da değil. MDN'de. En güvenli değerler esnek başlangıç, esnek uçlu Ve merkez.

Bu değerlerle ilişkilendirebileceğiniz iki ek anahtar kelime daha vardır: güvenli Ve güvensiz. Kullanım güvenli bu tür konumlandırmayı ne kadar yaparsanız yapın, öğeyi ekranın dışında görünecek şekilde (üstte olduğu gibi) konumlandıramayacağınızı ve böylece içeriğin de kaydırılamayacağını garanti eder (buna " denir) veri kaybı").

öğeleri hizala

Bu özellik, esnek öğelerin geçerli satırdaki çapraz eksen boyunca nasıl yerleştirildiğine ilişkin varsayılan davranışı tanımlar. Bunu çapraz eksenin (ana eksene dik) iki yana yaslı içerik versiyonu olarak düşünün.

uzatmak(varsayılan): kabı doldurmak için uzat (minimum genişlik/maksimum genişlik hâlâ korunuyor)
esnek başlangıç / başlangıç / kendi kendine başlama: elemanlar enine eksenin başlangıcına yerleştirilir. Aralarındaki fark küçüktür ve uyum içindedir esnek yön kurallar veya yazma modu tüzük
esnek uçlu / son / kendi kendine son: Elemanlar enine eksenin sonunda bulunur. Fark yine incelikli ve uyumda yatıyor esnek yön veya yazma modu tüzük
merkez: elemanlar enine eksende ortalanır
temel çizgi: öğeler taban çizgilerine hizalanır

güvenli Ve güvensiz Değiştirici anahtar kelimeler, tüm bu anahtar kelimelerle birlikte kullanılabilir (bu, tüm tarayıcılar tarafından desteklenmese de), bu, öğelerin içeriğe erişilemeyecek şekilde hizalanmasını önlemeye yardımcı olur.

içeriği hizala

Bu özellik, çapraz eksende fazladan boşluk olduğunda esnek kapsayıcı içindeki çizgileri hizalar; buna benzer şekilde iki yana yaslı içerik Tek tek öğeleri ana eksende hizalar.

Not: Yalnızca bir satır esnek öğe olduğunda bu özelliğin hiçbir etkisi yoktur.

esnek başlangıç / başlangıç: öğeler kabın başına taşındı. Daha fazla destekleniyor esnek başlangıç kullanır, esnek yön sırasında başlangıç kullanır yazma modu yön.
esnek uçlu / son: öğeler kabın sonuna taşındı. Daha fazla destekleniyor esnek uçlu kullanır esnek yön sırasında son kullanır yazma modu yön.
merkez: Öğeler kapsayıcıda ortalanmıştır
arasındaki boşluk: elemanlar eşit olarak dağıtılmıştır; ilk satır kabın başında ve son satır ise sonundadır
uzay çevresinde: Öğeler her satırın etrafında eşit boşluk olacak şekilde eşit aralıklarla yerleştirilmiştir
eşit aralıkta: Öğeler, etraflarında eşit alan olacak şekilde eşit şekilde dağıtılır
uzatmak(varsayılan): çizgiler kalan alanı dolduracak şekilde uzar

İlk alt öğelerin özellikleri (esnek öğeler)

emir

Varsayılan olarak esnek öğeler orijinal sıralarına göre düzenlenir. Ancak mülk emir esnek kapta göründükleri sırayı kontrol eder.

Ürün (sipariş: ; /* varsayılan 0'dır */ )

esnek büyüme

Bu özellik, esnek bir elemanın gerektiğinde esneme yeteneğini belirler. Orantı görevi gören sıfırdan bir değer alır. Bu, bir elemanın esnek bir kap içinde ne kadar kullanılabilir alan kaplaması gerektiğinin özelliğidir.

Tüm elemanlar için ise esnek büyüme 1'e ayarlandığında kapsayıcıda kalan alan tüm alt öğeler arasında eşit olarak dağıtılacaktır. Eğer alt öğelerden biri 2 değerine sahipse, o öğe diğerlerinden iki kat daha fazla yer kaplayacaktır (ya da en azından kaplamaya çalışacaktır).

Öğe(esnek-büyüme: ; /* varsayılan 0 */ )

esnek-küçültme

Bu özellik, esnek bir elemanın gerektiğinde sıkıştırılma yeteneğini belirler.

Öğe ( esnek-küçültme: ; /* varsayılan 1 */ )
Negatif sayılar desteklenmez.

esnek tabanlı

Bu özellik, kalan alanı ayırmadan önce bir öğenin varsayılan boyutunu belirtir. Bu bir uzunluk (örn. %20, 5rem, vb.) veya bir anahtar kelime olabilir. Anahtar kelime Oto"genişlik veya yükseklik özelliğime bak" anlamına gelir. Anahtar kelime içerik"öğe içeriğine dayalı boyut" anlamına gelir - bu anahtar kelime hala çok iyi desteklenmemektedir, dolayısıyla ne için kullanıldığını kontrol etmek zordur maksimum içerik, minimum içerik veya uygun içerik.

Öğe (esnek temel: | Oto; /* varsayılan otomatik */ )
Eğer ayarlanmışsa 0 içeriğin etrafındaki fazladan boşluk dikkate alınmaz. Eğer ayarlanmışsa Oto, ek alan buna bağlı olarak dağıtılır esnek büyüme anlamlar.

Bu çizime bakın.

esnek

Bu, kullanımın kısaltmasıdır esnek büyüme, esnek-küçültme Ve esnek tabanlı birlikte. İkinci ve üçüncü parametreler ( esnek-küçültme Ve esnek tabanlı) isteğe bağlıdır. Varsayılan: 0 1 Oto.

Öğe ( esnek: yok | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
Bu kısayol özelliğinin kullanılması önerilir bireysel özellikleri ayarlamak yerine. Bu azaltma, diğer değerleri akıllıca ayarlar.

kendini hizala

Bu özellik, varsayılan hizalamayı (veya kullanılarak belirtilen) geçersiz kılmanıza olanak tanır. öğeleri hizala) bireysel esnek öğeler için.
Lütfen bak öğeleri hizala Mevcut değerleri anlamak için özellik.

Örnekler

Hemen hemen her gün karşılaştığımız bir sorunu çözen çok basit bir örnekle başlayalım: mükemmel hizalama. Bu görev için en basit çözüm flexbox kullanmaktır.

Parent ( display: flex; height: 300px; /* Veya her neyse */ ) .child ( width: 100px; /* Veya her neyse */ height: 100px; /* Ya da her neyse */ marj: auto; /* Büyü ! */ )
Bunun nedeni dikey hizalama özelliği kenar boşluğunun şu şekilde ayarlanmasıdır: Oto esnek bir kapta ek alan kaplar. Yani kenar boşluğunu ayarlamak Oto nesnenin her iki eksende de mükemmel şekilde ortalanmasını sağlar.

Şimdi birkaç özellik daha kullanalım. Hepsi sabit boyutlarda olan 6 öğeden oluşan bir liste düşünün, ancak otomatik boyutlar da olabilir. Tarayıcı boyutu değiştiğinde her şeyin iyi bir şekilde ve medya sorguları olmadan ölçeklenebilmesi için bunların yatay eksen boyunca eşit şekilde dağıtılmasını istiyoruz.

Flex-container ( /* İlk önce bir esnek bağlam yaratırız */ display: flex; /* Sonra bir esnek yön tanımlarız ve elemanların yeni satırlara sarılmasına izin veririz * Bunun şununla aynı olduğunu unutmayın: * flex-direction: row ; * flex-wrap: sarma; */ flex-flow: satır sarma; /* Sonra kalan alanın nasıl dağıtıldığını belirleriz */ justify-content: space-around)
Hazır. Geriye kalan her şey sadece stildir.

Ekran çözünürlüğünü veya ölçeğini değiştirirseniz şu şekilde görünecektir:

Başka bir şey deneyelim. Web sitemizin üst kısmında sağa hizalanmış gezinme öğelerimiz olduğunu, ancak bunların orta boyutlu ekranlarda ve küçük cihazlarda tek bir sütunda iki yana yaslı olmasını istediğimizi düşünün. Oldukça basit.

/* Büyük ekranlar */ .navigation ( display: flex; flex-flow: row Wrap; /* Bu, öğeleri ana eksendeki satırın sonuna hizalar */ justify-content: flex-end; ) /* Orta ekranlar */ @ media all ve (max-width: 800px) ( .navigation ( /* Orta boyutlu ekranlarda, beyaz alanı elemanların etrafına eşit şekilde dağıtarak elemanları ortalarız */ justify-content: space-around; )) /* Küçük ekranlar */ @media all and (max-width: 500px) ( .navigation ( /* Küçük ekranlarda artık satır yönünü değil, sütunu kullanıyoruz */ flex-direction: sütun; ))

Büyük ekranlar

Orta ekranlar

Küçük ekranlar

Esnek elemanların esnekliğiyle oynayarak daha da iyi bir şey deneyelim! Üstbilgi ve altbilgi içeren 3 sütunlu, tam yükseklikte bir sayfa düzenine ne dersiniz? Ve elemanların başlangıç sırasına bağlı değildir.

Wrapper ( display: flex; flex-flow: row Wrap; ) /* flex-base aracılığıyla tüm elemanların %100 genişliğe sahip olduğunu söylüyoruz */ .wrapper > * ( flex: 1 100%; ) /* Kullanıyoruz ilk mobil seçenek için orijinal sıralama * 1. başlık * 2. makale * 3. kenar 1 * 4. kenar 2 * 5. alt bilgi */ /* Orta ekranlar */ @media hepsi ve (min-width: 600px) ( /* Her iki kenar çubuğuna da aynı satırda olmasını söyleriz */ .aside ( flex: 1 auto; )) /* Büyük ekranlar */ @media all ve (min-width: 800px) ( /* Sırasını ters çeviririz ilk kenar çubuğunu ve ana olanı ve ana öğeye diğer iki kenar çubuğunun genişliğinin iki katını kaplamasını söyleyin */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order : 2; ) .aside-2 ( order : 3; ) .footer ( order: 4; ))

@mixin flexbox() ( görüntü: -webkit-box; görüntü: -moz-box; görüntü: -ms-flexbox; görüntü: -webkit-flex; görüntü: flex; ) @mixin flex($değerler) ( -webkit- box-flex: $değerler; -moz-box-flex: $değerler; -webkit-flex: $değerler; ) @mixin order($val) ( -webkit- box-ordinal-group: $val; -moz-box -ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; flexbox(); .item ( @include flex(1 200px); @include order(2); )

Hatalar

Flexbox'ın elbette hataları yok değil. Bunlardan gördüğüm en iyi koleksiyon Philip Walton ve Greg Whitworth'un Flexbugs'u. Bu, hepsini takip etmek için açık kaynaklı bir depo, bu yüzden ona bağlantı vermenin en iyisi olduğunu düşünüyorum.

Tarayıcı desteği

Flexbox "versiyonuna" göre ayrılmış:

(yeni), spesifikasyondaki en son sözdizimi anlamına gelir (örneğin ekran: esnek;)
(ara doldurucu), 2011'den bu yana garip resmi olmayan sözdizimi anlamına gelir (örn. ekran: esnek kutu;)
(eski), 2009'dan bu yana eski sözdizimi anlamına gelir (örn. ekran: kutu;)

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

Daha iyi tarayıcı desteği elde etmek amacıyla söz dizimlerinin nasıl karıştırılacağı hakkında daha fazla bilgi için lütfen şu adrese bakın:

align-content özelliği, boş alan olması durumunda esnek kap içindeki çizgilerin enine eksen boyunca hizalanma türünü belirtir.

Şunlar için geçerlidir:: esnek kap.

Varsayılan değer: uzatmak.

Esnek başlangıç Çizgiler enine eksenin başlangıcında bulunur. Sonraki her satır bir öncekiyle aynı hizadadır. flex-end Satırlar çapraz eksenin sonundan başlayarak yerleştirilir. Önceki her satır bir sonrakiyle aynı hizadadır. merkez Çizgiler kabın ortasına yerleştirilir. space-between Çizgiler kap içerisinde eşit olarak dağılmıştır ve aralarındaki mesafe aynıdır. boşluk-etrafında Çizgiler, iki bitişik çizgi arasındaki boşluk aynı olacak şekilde eşit aralıklarla yerleştirilmiştir. İlk satırdan önceki ve son satırdan sonraki boşluk, iki bitişik satır arasındaki boşluğun yarısına eşittir. boşluk-eşit Satırlar eşit olarak dağıtılır. İlk satırdan önceki ve son satırdan sonraki beyaz boşluk diğer satırlarla aynı genişliktedir. uzatma Çizgiler mevcut alanı doldurmak için eşit şekilde gerilir.

align-content özelliği, justify-content'in ana eksen içindeki tek tek öğeleri nasıl hizaladığına benzer şekilde, çapraz eksende fazladan boşluk olduğunda esnek kapsayıcının çizgilerini esnek kapsayıcı içinde hizalar. Bu özelliğin tek hatlı esnek konteyner üzerinde hiçbir etkisi olmadığını unutmayın. Değerler aşağıdaki anlamlara sahiptir:

Not: Yalnızca çok hatlı esnek kaplarda çapraz eksende çizgilerin hizalanması için boş alan bulunur, çünkü tek hatlı esnek kaplarda tek hat otomatik olarak boşluğu dolduracak şekilde uzar.

Şunlar için geçerlidir::esnek kaplar.

İlk: uzatmak.

Esnek Başlangıç Hatları esnek konteynerin başlangıcına doğru paketlenir. Esnek kapsayıcıdaki ilk satırın çapraz başlangıç kenarı, esnek kapsayıcının çapraz başlangıç kenarıyla aynı hizada yerleştirilir ve sonraki her satır, bir önceki satırla aynı hizada yerleştirilir. esnek uç Hatlar esnek kabın sonuna doğru paketlenir. Son satırın çapraz uç kenarı, esnek kabın çapraz uç kenarıyla aynı hizada yerleştirilir ve önceki her satır, bir sonraki satırla aynı hizada yerleştirilir. merkez Çizgiler esnek kabın merkezine doğru paketlenir. Esnek kaptaki çizgiler birbirleriyle aynı hizada yerleştirilir ve esnek kabın ortasında hizalanır, esnek kabın çapraz başlangıç içerik kenarı ile esnek kaptaki ilk satır arasında ve esnek kaptaki ilk satır arasında eşit miktarda boşluk bulunur. esnek kabın çapraz uç içerik kenarı ve esnek kabın son satırı. (Kalan boş alan negatifse çizgiler her iki yönde de eşit şekilde taşacaktır.) Aradaki boşluk Çizgiler esnek kapta eşit olarak dağıtılır. Kalan boş alan negatifse bu değer esnek başlangıçla aynıdır. Aksi takdirde, esnek kapsayıcıdaki ilk satırın çapraz başlangıç kenarı, esnek kapsayıcının çapraz başlangıç içerik kenarıyla aynı hizada yerleştirilir; esnek kaptaki son satırın çapraz başlangıç kenarı, esnek kapsayıcıdaki çapraz başlangıç içerik kenarıyla aynı hizada yerleştirilir. Esnek kabın uç içerik kenarı ve esnek kapta kalan çizgiler, herhangi iki bitişik çizgi arasındaki boşluk aynı olacak şekilde dağıtılır. boşluk-etrafındaki çizgiler esnek kap içinde her iki uçta yarım boyutlu boşluklarla eşit olarak dağıtılır. Kalan boş alan negatifse bu değer merkezle aynıdır. Aksi takdirde, esnek kaptaki çizgiler, herhangi iki bitişik çizgi arasındaki mesafe aynı olacak ve ilk/son çizgiler ile esnek kap kenarları arasındaki boşluk, esnek çizgiler arasındaki aralığın yarısı kadar olacak şekilde dağıtılır. uzay-eşit Çizgiler esnek kapta eşit şekilde dağıtılır. Kalan boş alan negatifse bu değer merkezle aynıdır. Aksi takdirde esnek kaptaki çizgiler, her esnek çizgi arasındaki boşluk aynı olacak şekilde dağıtılır. uzat Çizgiler kalan alanı kaplayacak şekilde uzar. Kalan boş alan negatifse bu değer esnek başlangıçla aynıdır. Aksi takdirde, boş alan tüm çizgiler arasında eşit olarak bölünerek çapraz boyutları artırılır.

Flexbox'ın web geliştiricilerinin hızla ilgisini çekmesinin nedenlerinden biri, web'e ilk kez uygun hizalama yeteneklerini getirmesidir. Düzgün dikey hizalamayı mümkün kıldı, böylece sonunda bir kutuyu kolayca ortalayabiliyoruz. Bu kılavuzda Flexbox'ta hizalama ve yaslama özelliklerinin nasıl çalıştığına kapsamlı bir şekilde bakacağız.

Kutumuzu ortalamak için, öğemizi çapraz eksende hizalamak üzere align-items özelliğini kullanırız; bu durumda bu, dikey olarak çalışan blok eksenidir. Öğeyi ana eksene hizalamak için justify-content'i kullanırız; bu durumda satır içi eksen yatay olarak çalışır.

Bu örneğin koduna aşağıdan göz atabilirsiniz. Kabın veya iç içe geçmiş öğenin boyutunu değiştirdiğinizde, iç içe geçmiş öğe her zaman ortalanmış halde kalır.

Hizalamayı kontrol eden özellikler

Bu kılavuzda bakacağımız özellikler aşağıdaki gibidir.

justify-content - ana eksendeki tüm öğelerin hizalamasını kontrol eder.
align-items - tüm öğelerin çapraz eksendeki hizalamasını kontrol eder.
align-self - bireysel bir esnek öğenin çapraz eksende hizalanmasını kontrol eder.
hizalama içeriği - spesifikasyonda "esnek hatların paketlenmesi" olarak açıklanmıştır; çapraz eksendeki esnek çizgiler arasındaki boşluğu kontrol eder.

Ayrıca flexbox'ta hizalama için otomatik kenar boşluklarının nasıl kullanılabileceğini de keşfedeceğiz.

Not: Flexbox'taki hizalama özellikleri kendi spesifikasyonlarına (CSS Kutu Hizalama Düzeyi 3) yerleştirilmiştir. Bu spesifikasyonun sonuçta Flexbox Düzey Bir'de tanımlanan özelliklerin yerine geçmesi beklenmektedir.

Çapraz Eksen

align-items ve align-self özellikleri, esnek öğelerimizin çapraz eksende, flex-direction row ise sütunların aşağısında ve flex-direction Column ise satır boyunca hizalanmasını kontrol eder.

En basit esnek örnekte çapraz eksen hizalamasını kullanıyoruz. Bir konteynere display: flex eklersek, alt öğelerin tümü sıra halinde düzenlenmiş flex öğeler haline gelir. Bu öğe, çapraz eksendeki öğelerin yüksekliğini tanımladığından, hepsi en uzun öğe kadar uzun olacak şekilde esneyecektir. Esnek kabınızın bir yükseklik ayarı varsa, öğenin içinde ne kadar içerik olduğuna bakılmaksızın öğeler bu yüksekliğe kadar uzar.

Öğelerin aynı yüksekliğe sahip olmasının nedeni, çapraz eksende hizalamayı kontrol eden özellik olan align-items öğesinin başlangıç değerinin Stretch olarak ayarlanmış olmasıdır.

Öğelerin nasıl hizalanacağını kontrol etmek için diğer değerleri kullanabiliriz:

hizalama öğeleri: esnek başlangıç
hizalama öğeleri: esnek uç
öğeleri hizala: merkez
öğeleri hizala: uzat
hizalama öğeleri: taban çizgisi

Aşağıdaki canlı örnekte, align-item'ların değeri Stretch'tir. Diğer değerleri deneyin ve esnek kaptaki tüm öğelerin birbirine göre nasıl hizalandığını görün.

Bir öğeyi align-self ile hizalama

align-items özelliği, align-self özelliğini tüm esnek öğelerde grup olarak ayarlar. Bu, tek bir öğeyi hedeflemek için align-self özelliğini açıkça bildirebileceğiniz anlamına gelir. align-self özelliği, align-items ile aynı değerlerin tamamını ve ayrıca auto değerini kabul eder; bu, değeri esnek kapsayıcıda tanımlanan değere sıfırlar.

Bir sonraki canlı örnekte, esnek kapsayıcıda align-items: flex-start bulunur; bu, öğelerin hepsinin çapraz eksenin başlangıcına hizalandığı anlamına gelir. İlk çocuk seçiciyi kullanarak ilk öğeyi hedefledim ve bu öğeyi align-self: Stretch; başka bir öğe, seçilen ve verilen align-self: center sınıfı kullanılarak seçildi. Bunun nasıl çalıştığını görmek için align-item'lerin değerini değiştirebilir veya tek tek öğelerdeki align-self'in değerlerini değiştirebilirsiniz.

Ana ekseni değiştirme

Şu ana kadar esnek yönümüz row olduğunda ve yukarıdan aşağıya yazılan bir dilde çalışırken davranışa baktık. Bu, ana eksenin sıra boyunca yatay olarak ilerlediği ve çapraz eksen hizalamamızın öğeleri yukarı ve aşağı hareket ettirdiği anlamına gelir.

Esnek yönümüzü sütun olarak değiştirirsek, align-items ve align-self öğeleri sola ve sağa hizalar.

Bunu, flex-direction: sütununa sahip esnek bir konteynere sahip olan ancak bunun dışında önceki örnekle tamamen aynı olan aşağıdaki örnekte deneyebilirsiniz.

İçeriği çapraz eksende hizalama - align-content özelliği

Şu ana kadar öğeleri veya esnek konteyner tarafından tanımlanan alan içindeki tek bir öğeyi hizalıyorduk. Sarılmış çok satırlı esnek bir kabınız varsa, satırlar arasındaki alanın dağıtımını kontrol etmek için align-content özelliğini de kullanmak isteyebilirsiniz. Spesifikasyonda bu, paketleme esnek hatları olarak tanımlanmaktadır.

Hizalama içeriğinin çalışması için esnek kabınızda öğeleri görüntülemek için gerekli olandan daha fazla yüksekliğe ihtiyacınız vardır. Daha sonra tüm öğeler üzerinde bir küme olarak çalışır ve bu boş alanda ne olacağını ve içindeki tüm öğe kümesinin hizalanmasını belirler.

align-content özelliği aşağıdaki değerleri alır:

hizalama içeriği: esnek başlangıç
hizalama içeriği: esnek uç
hizalama içeriği: merkez
içeriği hizala: aradaki boşluk
hizalama içeriği: etrafındaki boşluk
hizalama içeriği: uzatma
hizalama içeriği: eşit aralıklarla (Flexbox spesifikasyonunda tanımlanmamıştır)

Aşağıdaki canlı örnekte, esnek konteynerin yüksekliği 400 pikseldir; bu, öğelerimizi görüntülemek için gerekenden fazladır. align-content'in değeri space-between'dir; bu, kullanılabilir alanın paylaşıldığı anlamına gelir arasındaçapraz eksende konteynerin başlangıcı ve bitişiyle aynı hizada yerleştirilen esnek çizgiler.

align-content özelliğinin nasıl çalıştığını görmek için diğer değerleri deneyin.

Sütunlarla çalışırken bu özelliğin nasıl davrandığını görmek için bir kez daha esnek yönümüzü sütuna çevirebiliriz. Daha önce olduğu gibi, tüm öğeleri görüntüledikten sonra bir miktar boş alana sahip olmak için çapraz eksende yeterli alana ihtiyacımız var.

Not: space-evenly değeri flexbox spesifikasyonunda tanımlanmamıştır ve Box Alignment spesifikasyonuna daha sonra eklenen bir değerdir. Bu değere yönelik tarayıcı desteği, flexbox spesifikasyonunda tanımlanan değerler kadar iyi değildir.