Flexbox nedir? Tüm css özelliklerinin tanımı, temel prensipleri, avantajları ve dezavantajları. Flexbox Nasıl Çalışır?

Flexbox, css3 kullanarak bir düzende blokları görüntülemek için yeni bir yol sunar ve öğeleri birbirine göre konumlandırmayı kolaylaştırmak için tasarlanmıştır. Bu makalede, en son flexbox sözdizimine bir göz atacağız. Tarayıcı sürümleri son zamanlarda yeterince hızlı değişiyor, bu nedenle flexbox gerçek projelerde yaygın olarak desteklendiğinde döngüde olacaksınız.

Flexbox ne içindir?

Geliştiriciler, kutulara doğru konumu vermek için uzun süre tablolar, kayan değerler, satır içi blok ve diğer CSS özelliklerini kullandılar. Ancak, yukarıdaki araçların hiçbiri şu anda neredeyse her projede kullanılan karmaşık sayfaları ve uygulamaları oluşturmak için tasarlanmamıştır. Dikey merkezleme gibi basit şeyler yeterince zordu. Değişken ızgaralara dayalı bir düzen oluşturmak genellikle profesyonelliğin zirvesi olarak kabul edilir ve bu nedenle ızgara tabanlı CSS çerçeveleri yaygınlaşmıştır. Öyleyse, birçok proje genellikle akışkan ızgaralar, aynı yükseklikte bloklar, blokların dikey merkezlenmesi vb. Kullanıyorsa, şu soru ortaya çıkar: "Neden hala bunları hızlı ve kolay bir şekilde yapmanıza izin verecek hiçbir özellik yok?"

Flexbox tüm bu sorunları çözmeyi hedefliyor!

Teknik özellik durumu ve tarayıcı desteği

Flexbox modeli dört yıldır geliştiriliyor. Tarayıcılar, spesifikasyonun farklı deneysel sürümlerini kullanır. Eylül 2012'de, Flexbox sözdiziminin 3. W3C geliştirici ekibi incelemesi W3C Aday statüsüne ulaştı. Bu, W3C'nin geçerli sözdizimini onayladığı ve tarayıcılar tarafından satıcı öneklerinin kullanımını onayladığı anlamına gelir.

Flexbox spesifikasyonu değişiklik geçmişi:

• Temmuz 2009 Çalışma Taslağı (ekran: kutu;)
• Mart 2011 Çalışma Taslağı (ekran: flexbox;)
• Kasım 2011 Çalışma Taslağı (ekran: flexbox;)
• Mart 2012 Çalışma Taslağı (ekran: flexbox;)
• Haziran 2012 Çalışma Taslağı (ekran: flex;)
• Eylül 2012 Aday Önerisi (ekran: esnek;)

Tarayıcılar hızlı Flexbox desteği aldı. Chrome 22+, Opera 12.1+, IE10, Firefox\u003e \u003d 16 zaten Flexbox'ı destekliyor. Örnekleri görüntülemek için bu tarayıcılardan birini kullanmanızı tavsiye ederim.

Kavram ve terminoloji

Flexbox, geçmişte genellikle zor olan ve bazı durumlarda büyük problemler olan bir düzende kutuları konumlandırmayı kolaylaştırmak için tasarlanmış olsa da, bu sorunları gerçek projelerde Flexbox ile çözmek biraz zaman alacaktır. Modelin terminolojisindeki nüanslar, kullanımını zorlaştırabilir. Flexbox modelinin nasıl çalıştığına bir göz atalım.

Flexbox modeli, esnek kap ve esnek öğeler içerir. Flex kapsayıcı, flex veya inline-flex olarak ayarlanmış görüntüleme özelliğine sahip olmalıdır. Flex ile, konteyner bir blok elementtir ve inline-flex ile, bir inline elementtir.

Esnek konteyner bildirimine bir örnek:

Flex-container (display: -webkit-flex; display: flex;)

Flex kapsayıcı, esnek öğelerin üst öğesidir. Esnek noktalar istediğiniz kadar olabilir. Esnek kapsayıcı dışındaki ve esnek öğelerin içindeki her şey her zamanki gibi görüntülenir. Bu şekilde Flexbox, esnek öğelerin bir esnek kap içinde nasıl konumlandırıldığını belirler.

Esnek öğeler, esnek çizgi (esnek çizgi) boyunca esnek kabın içine yerleştirilir. Varsayılan olarak, bir esnek kapsayıcıda yalnızca bir esnek çizgi vardır. Aşağıda, varsayılan esnek çizgisi boyunca soldan sağa yerleştirilmiş iki paragrafa sahip bir örnek verilmiştir:

​

Flex-konteyner (display: -webkit-flex; display: flex; width: 700px; background-color: green; margin: 20px auto;) Flex-item (background-color: red; width: 100px; height: 100px; kenar boşluğu: 5px; renk: #fff;)

Yazma modları

Flexbox'ı özelleştirmenin önemli bir parçası, esnek çizginin yönünü değiştirmektir. Varsayılan olarak, esnek çizginin yönü metnin yönüyle aynıdır: soldan sağa, yukarıdan aşağı.

Spesifikasyonda yeni bir yazma modu modülü var. Metnin yönünü sağdan sola ve hatta dikey olarak değiştirmenize olanak tanır.

Bu modül geliştirme aşamasındadır, ancak Chrome, CSS yönü özelliğini desteklemektedir. Yönün ayarlanması: önceki örnekte rtl özelliği (sağdan sola), içeriğin yalnızca sağdan sola görüntülenme yönünü değil, aynı zamanda düzeni değiştirecek esnek çizginin yönünü de değiştirecektir.

Gövde (yön: rtl;) .flex-container (ekran: -webkit-flex; ekran: flex; genişlik: 700px; yükseklik: 240px; arka plan rengi: yeşil; kenar boşluğu: 10px otomatik;) .flex-öğe (arka plan- renk: kırmızı; genişlik: 100px; yükseklik: 100px; kenar boşluğu: 5px;)

Bu örnekten, Flexbox terminolojisinin şu anda neden bu kadar soyut olduğu sonucuna varabilirsiniz. Belli bir sayfanın hangi dilde yazıldığına dair hiçbir fikrimiz olmadığında (belki Arapça - sağdan sola yazı stiliyle!) "Sağa", "sol", "aşağı", "yukarı" gibi ifadeler kullanamazsınız.

Ana ve enine eksenler

Yön içeriğinin görüntüleme modundan bağımsız olmak için Flexbox, Ana Eksen ve Çapraz Eksen kavramını kullanır. Esnek çizgiler ana ekseni takip eder. Enine eksen, ana eksene diktir. Başlangıç \u200b\u200bve bitiş noktalarının adları ve her eksenin yönü:

• Ana Başlangıç
• Ana Uç
• Ana Yön (bazen Akış Yönü olarak da adlandırılır)
• Çapraz Başlangıç
• Çapraz uç
• Çapraz Yön

Devam etmeden önce, ana ve çapraz eksenin terminolojisini anlamak önemlidir. Flexbox modelindeki her şey bu iki eksen etrafında konumlandırılmıştır. Tüm örneklerimizde yazma modu soldan sağa, yukarıdan aşağıya doğruydu. Ancak bunun her zaman böyle olmayabileceğini aklınızda bulundurmalısınız.

Flex kapsayıcı özellikleri:

Esnek yön

Flex-direction özelliği, bir flex container'ın eksenlerini değiştirmenize izin verir. Flex-direction özelliği varsayılan olarak satıra ayarlanmıştır. Bu durumda, esnek öğeler yazma moduna göre konumlandırılır. Yine, bu soldan sağa, yukarıdan aşağıya (varsayılan) anlamına gelir.

Diğer olası değerler:

• satır-ters: Ana Başlangıç \u200b\u200bve Ana Bitiş değiştirilir. Yazma modu ltr (soldan sola) olsa bile, esnek öğeler yine de sağdan sola olacaktır.
• sütun: Ana eksen ve çapraz eksen değiştirilir. İçerik görüntüleme modu yataysa, esnek öğeler yine de dikey olarak istiflenecektir.
• sütun ters: yalnızca sütuna benzer ters.

Önceki örnekte, flex-direction özelliğini sütun olarak değiştirin:

Flex-container (display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 700px; height: 240px; background-color: green; margin: 10px auto;) .flex-item (arka plan rengi: kırmızı; genişlik: 100px; yükseklik: 100px; kenar boşluğu: 5px;)

Flex öğeleri artık dikey olarak istifleniyor.

haklı içerik

justify-content, ana eksen boyunca esnek öğelerin konumunu ayarlar. Olası değerler:

• flex-start (varsayılan)
• esnek uç
• merkez
• arasındaki boşluk
• boşluk

Justify-content: center ile bir örnek düşünün, böylece flex öğeleri ana eksende ortalanır:

Flex-container (display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto;) .flex-item (arka plan rengi: kırmızı; genişlik: 100px; yükseklik: 100px; kenar boşluğu: 5px;)

flex-start, flex-end ve center, ana eksen boyunca birbirine bağlanarak çalışır. Bununla birlikte, boşluk ve etrafındaki boşluk, esnek öğeler arasında boş alanı belirli bir şekilde dağıtır. Gerekçeli içeriğin dağılımını gösteren spesifikasyondan bir diyagram:

​

hizalama öğeleri

hizalama öğeleri, içeriği doğrulamak için isteğe bağlı bir özelliktir. hizalama öğeleri, esnek öğelerin görünümünü dikey eksene göre ayarlar. Olası değerler:

• flex-start (varsayılan)
• esnek uç
• merkez
• temel
• uzatmak

Flex öğelerinin dikey bir eksen etrafında dikey olarak ortalanmasına izin veren align-items: center özelliğini kullanmayı düşünün:

Flex-container (display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 700px; height: 240px; background-color: green; margin: 10px auto;) .flex-item (arka plan rengi: kırmızı; genişlik: 100px; yükseklik: 100px; kenar boşluğu: 5px;)

Bu nedenle, flex-start, flex-end ve center her zaman birbirine bitişik olarak konumlandırılır. Esnetme değeri oldukça basittir: Esnek öğelerin Çapraz Başlangıçtan Çapraz Uca, yani esnek konteynere göre dikey olarak uzamasını sağlar. taban çizgisi, esnek öğeleri taban çizgisiyle hizalamaya zorlar. Temel, esnek öğelerin satır içi içeriğinden hesaplanır. İşte bu değerlerin nasıl çalıştığına dair daha iyi bir açıklama:

​

Flex-sarma

Gördüğümüz tüm örneklerde, esnek kabın bir esnek çizgisi vardı. Flex-wrap özelliğinin kullanılması, değişen sayıda flex çizgisine sahip bir flex container oluşturacaktır. Olası değerler:

• nowrap (varsayılan)
• ters sarma

Esnek sarma, sarılacak şekilde ayarlanmışsa, esnek öğelere ek esnek çizgiler dahil edilir, ancak yalnızca esnek öğeler tek bir esnek çizgiye sığacak kadar alana sahip değilse. Dikey eksen yönünde ilave esnek çizgiler eklenir.

Flex-wrap kullanan bir örnek:

Flex-container (display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; genişlik: 700px; yükseklik: 240px; arka plan rengi: yeşil; kenar boşluğu: 10px otomatik;) .flex-item (arka plan rengi: kırmızı; genişlik: 300px; yükseklik: 100px; kenar boşluğu: 5px;)

Tersine sarma değeri, dikey eksen boyunca ters yönde yeni esnek çizgilerin eklenmesi dışında sarma ile aynıdır.

hizalama içeriği

hizalama içeriği, esnek sarma özelliğinin davranışını değiştirir. Bu değer, yalnızca esnek öğeleri hizalamak yerine hizalama öğelerine benzer, esnek çizgileri hizalar. Tahmin edebileceğiniz gibi değerler benzer:

• streç (varsayılan)
• esnek başlangıç
• esnek uç
• merkez
• arasındaki boşluk
• boşluk

Bu değerler, içeriği-hizala ve öğeleri hizala ile aynı şekilde çalışır.

Hizalama içeriği: merkez örneği

esnek akış

Bu özellik, esnek yönü ve esnek sarma özelliklerini birleştirir.

esnek akış:

Flex-container (-webkit-flex-flow: column nowrap; flex-flow: column nowrap;)

Flex öğeleri özellikleri

Bir esnek öğe, esnek bir kabın alt öğesidir. Bir esnek kabın içeriği, o kabın esnek öğesini ifade eder. Esnek öğe içeriği her zamanki gibi görüntülenir. Örneğin, float özelliği yürürlükte iken, esnek öğeler buna hiçbir şekilde tepki vermeyecektir. Şamandıralar ayrıca esnek öğenin içinde de olabilir.

Flex Öğelerin Ana Boyut ve Çapraz Boyuta sahip olduğu söyleniyor. Ana Boyut, esnek öğenin ana eksen yönündeki boyutudur ve Çapraz Boyut, çapraz eksen yönündedir. Aslında, esnek bir öğenin genişliği veya yüksekliği, esnek kabın eksenine bağlı olarak Ana Boyut ve Çapraz Boyut olabilir.

Flex öğelerinin davranışını kontrol eden özelliklere bir göz atalım.

Sipariş

Düzen, en basit özelliktir. Esnek öğelerin sırası, HTML'deki esnek öğelerin düzeni tarafından sağlanır. Bu örnekte, bir esnek öğenin sipariş özelliğini -1 olarak değiştireceğiz ve diğer esnek öğelerin sırasının nasıl değiştiğini göreceğiz.

Flex-container (display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; genişlik: 700px; yükseklik : 240px; arka plan rengi: yeşil; kenar boşluğu: 10px otomatik;) .flex-öğe (arka plan rengi: kırmızı; genişlik: 300px; yükseklik: 100px; kenar boşluğu: 5px;) .ilk (-webkit-order: -1; sıra: -1;)

Bu özellik, HTML'deki esnek öğelerin sırasının bir olması gerektiğinde ve esnek öğelerin görüntüsünün farklı olduğu durumlarda erişilebilirlik için yararlı olabilir.

Marj

Muhtemelen margin: auto effect'i biliyorsunuzdur. Flexbox benzer bir şey yapar, ancak daha fazla yetenekle. "Otomatik" fazladan yer kaplar. Bu özellik, esnek öğeleri çeşitli şekillerde konumlandırmak için kullanılabilir.

Örneğin, margin-right: auto; sağında mümkün olan tüm boş alanı sağlarken ilk esnek öğe için:

Flex-container (display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto;) .flex-item (arka plan rengi: kırmızı; genişlik: 100px; yükseklik: 100px; kenar boşluğu: 5px;) .flex-öğe: birinci-çocuk (margin-sağ: otomatik;)

Şimdi margin: auto'nun nasıl çalıştığını bir örnekle görelim.

Flex-container (display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto;) .flex-item (arka plan rengi: kırmızı; genişlik: 100px; yükseklik: 100px; kenar boşluğu: 5px;) .flex-öğe: birinci-çocuk (kenar boşluğu: otomatik;)

hizalanmak

Öğenin kendini hizalama özelliği, esnek kabın öğeleri hizala özelliğini geçersiz kılar. Olası değerler, hizalama öğelerine benzer:

• streç (varsayılan)
• esnek başlangıç
• esnek uç
• merkez
• temel

Bu örnekte, align-self özelliği için öğelere farklı değerler atayacağız:

Flex-container (display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto;) .flex-item (arka plan rengi: kırmızı; genişlik: 100px; min-yükseklik: 70px; kenar boşluğu: 5px;) .item1 (-webkit-align-self: flex-start; align-self: flex-start;). item2 (-webkit-align-self: flex-end; align-self: flex-end;) .item3 (-webkit-align-self: center; align-self: center;) .item4 (-webkit-align-self : taban çizgisi; hizala-öz: taban çizgisi;) .item5 (-webkit-hizala-öz: taban çizgisi; hizalama-öz: taban çizgisi; dolgu: 2em 0;) .item6 (-webkit-hizala-kendini: uzat; hizala-kendini: Uzatmak;)

esnek

Sonunda Flexbox'taki flex özelliğine ulaştık. Flex, esnek öğelerin ana eksendeki boş alanı nasıl kullanacağını tanımlar. Olası değerlerin her birini ele alalım.

Esnek:

Bu sözdizimi, esnek öğenin toplam genişliğinin ne kadar olması gerektiğini belirtir. Aşağıdaki örnekte, ilk esnek öğe kullanılabilir alanın 2 / 4'ünü kaplayacak ve kalan iki esnek öğenin her biri 1 / 4'dür:

​

Flex-container (display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto;) .flex-item (arka plan rengi: kırmızı; genişlik: 100px; min-yükseklik: 70px; kenar boşluğu: 5px;) .item1 (-webkit-flex: 2; flex: 2;) .item2 (-webkit-flex: 1 ; esnek: 1;) .item3 (-webkit-flex: 1; esnek: 1;)

Öğeleri genişlik boyunca eşit olarak dağıtmak genellikle gereklidir. Bunu yapmak için, bu özelliğin değerini 1 olarak ayarlamanız yeterlidir; tüm esnek öğeler, kabın genişliği boyunca dağıtılacaktır.

​

Flex-container (display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto;) .flex-item (arka plan rengi: kırmızı; genişlik: 100px; min-yükseklik: 70px; kenar boşluğu: 5px;) .item1 (-webkit-flex: 1; flex: 1;) .item2 (-webkit-flex: 1 ; esnek: 1;) .item3 (-webkit-flex: 1; esnek: 1;)

flex: ilk

Bu değere sahip esnek noktalar, kesinlikle sabit bir genişliğe sahip olacaktır, ancak yalnızca boş alan varsa (gerekirse, boyutta küçülme - lastik gibi olur).

esnek: otomatik

Esneme noktaları, ana eksen boyunca tamamen lastikleşir. Chrome 23.0.1271.95'te düzgün çalışmadığından flex: 1 kullanmak daha iyidir.

flex: yok

esnek öğeler her durumda sabit genişliğe dönüşür

gelişmiş esnek

Flex özelliği, tek bir bildirime özgü esnek büyütme, esnek küçültme ve esnek tabanlı seçimler yapmak için küçültme modunda kullanılabilir: esnek:

Çoğu durumda, bu sözdizimi gerekli değildir. Dahası, bu steno uygulamak Flexbox modelinin derinlemesine anlaşılmasını gerektirir. Flex-Grow, flex-shrink ve flex-base özelliklerinin her birini özel yapabilirsiniz. Bu kısaltmayı kesinlikle kullanmamanızı tavsiye ederim: varsayılan daha makul.

görünürlük

Görünürlük özelliği uygulandığında: daralt; görünürlükten farklı olacaktır: gizli değerler; ve ekran: yok; esnek öğeler için. Daraltılacak şekilde ayarlandığında, öğe esnek kabın Çapraz Boyutuna geçecek, ancak ana eksen alanını etkilemeyecektir. Bu, esnek kabın Çapraz Boyutunu etkilemeden dinamik olarak esnek öğeler eklemek veya çıkarmak için yararlı olabilir.

Şu anda görünürlük: daralt; tarayıcılarda düzgün çalışmıyor. Şu anda görünürlük: çöküş; görünürlük: gizli; Yakın gelecekte durumun değişeceğine eminim.

Spesifikasyonda daraltma değerinin nasıl çalışması gerektiğini görün (http://www.w3.org/TR/css3-flexbox/#visibility-collapse)

Sonuç

Tahmin edebileceğiniz gibi Flexbox, güçlü bir düzen oluşturucudur. Blokları görüntülemek için tamamen yeni bir yaklaşım gerektirir. Umarım bu makaleyi yararlı bulmuşsunuzdur ve şimdi Flexbox ile düzenleri denemeye başlayabilirsiniz. Bu modelin geleceği gerçekten şaşırtıcı.

Flexbox, bizi saf CSS (dikey hizalama gibi) zahmetinden kurtarmak için tasarlanmıştır ve harika bir iş çıkarır. Ancak, özellikle yeni başlayan biriyseniz, nasıl çalıştığını anlamak zor olabilir.

Flexbox'ın temel amacı, katmanları esnek ve çalışmayı sezgisel hale getirmektir. Bunu başarmak için, kapların çocuklarını nasıl idare edeceklerine kendilerinin karar vermesine izin verir, bunların boyutlarını ve aralarındaki boşlukları değiştirir.

Kulağa hoş geliyor, ama pratikte bu kadar akıcı mı görelim. Bu makalede, en popüler 5 Flexbox özelliğini, ne yaptıklarını ve gerçekte nasıl çalıştıklarını inceleyeceğiz.

Ekran: Flex

İşte örnek bir sayfa:

Gray div içinde farklı boyutlarda 4 farklı renkte divimiz var. Her div bir display: block özelliğine sahiptir. Bu nedenle, her kare, çizginin tüm genişliğini kaplar.

Flexbox'ı kullanmaya başlamak için, konteynerimizi esnek bir konteyner yapmamız gerekiyor. Bu şu şekilde yapılır:

#container (ekran: esnek;)

Görünüşe göre gerçekten hiçbir şey değişmedi - div'ler arka arkaya durdu. Ama gerçekten güçlü bir şey yaptın. Karelerinize "esnek bağlam" adı verilen harika bir özellik verdiniz.

Esnek Yön

Bir esnek kabın iki ekseni vardır: ana eksen ve dikey eksen.

Varsayılan olarak, tüm öğeler ana eksen boyunca konumlandırılır: soldan sağa. Böylece display: flex'i uyguladığımızda karelerimiz dizilmişti. Ancak esnek yön, ana eksenin döndürülmesine izin verir.

#container (display: flex; flex-direction: column;)

Flex-direction: column öğesinin kareleri ana eksene dik olan eksen boyunca hizalamadığına dikkat etmek önemlidir. Ana eksenin kendisi konumunu değiştirir ve şimdi yukarıdan aşağıya doğru yönlendirilir.

Esnek yön için birkaç özellik daha vardır: satır ters ve sütun ters.

İçeriği Yasla

Yaslama içeriği, öğelerin ana eksen boyunca hizalanmasından sorumludur.

Flex-direction: row'a geri dönelim.

#container (display: flex; flex-direction: row; justify-content: flex-start;)

Yaslama içeriği 5 değer alabilir:

1. esnek başlangıç;
2. esnek uç;
3. merkez;
4. arasındaki boşluk;
5. boşluk etrafında.

Aradaki boşluk, kareler arasındaki aynı mesafeyi ayarlar, ancak kap ve kareler arasındaki mesafeyi ayarlamaz. Etrafında boşluk da kareler arasındaki aynı mesafeyi belirler, ancak şimdi kap ile kareler arasındaki mesafe, kareler arasındaki mesafenin yarısı kadardır.

Öğeleri Hizala

Yaslama içeriği ana eksenle çalışırken, hizalama öğeleri ana eksene dik bir eksenle çalışır.

Flex-direction: row'a geri dönelim ve align-items komutlarını inceleyelim:

1. esnek başlangıç;
2. esnek uç;
3. merkez;
4. uzatmak;
5. temel.

Hizalama öğeleri için: gerdirme, karelerin yüksekliğinin otomatik olması gerektiğini belirtmek gerekir. Hizalama öğeleri için: taban çizgisi, paragraf etiketlerini kaldırmanıza gerek yoktur, aksi takdirde şöyle görünecektir:

Eksenlerin nasıl çalıştığını daha iyi anlamak için yaslama içeriğini hizalama öğeleriyle birleştirelim ve iki esnek yön özelliği için merkez hizalamanın nasıl çalıştığını görelim:

Kendini Hizala

Align-self, öğeleri ayrı ayrı hizalamanıza izin verir.

#container (align-items: flex-start;) .square # one (align-self: center;) // Yalnızca bu kare ortalanacaktır.

İki kare için kendini hizalamayı ve öğeleri hizalayalım: center ve flex-direction: geri kalanı için satır.

Esnek Temel

Flex-based, diğer Flexbox özellikleri tarafından yeniden boyutlandırılmadan önce öğelerin başlangıç \u200b\u200bboyutundan sorumludur:

Esnek taban, ana eksen boyunca öğelerin boyutunu etkiler.

Bakalım ana eksenin yönünü değiştirirsek ne olacak:

Elemanların yüksekliğini de değiştirmemiz gerektiğini unutmayın. Esnek taban, eksenin yönüne bağlı olarak hem elemanların yüksekliğini hem de genişliklerini tanımlayabilir.

Flex Grow

Bu özellik biraz daha karmaşıktır.

İlk olarak, karelerimize 120px ile aynı genişliği verelim:

Varsayılan esnek büyüme değeri 0'dır. Bu, karelerin büyümesine izin verilmediği anlamına gelir (kapta kalan alanı kaplar).

Her kare için flex-Grow'u 1 olarak ayarlamaya çalışalım:

Kareler kapta kalan alanı kapladı. Flex-Grow değeri, genişlik değerini geçersiz kılar.

Ancak bu bir soruyu akla getiriyor: flex-Grow: 1 ne anlama geliyor?

Flex-Grow'u 999'a ayarlamayı deneyelim:

Ve ... hiçbir şey olmadı. Bu, esnek büyümenin mutlak değerler değil, göreli değerler almasından kaynaklanıyordu.

Bu, flex-Grow'un hangi değere sahip olduğunun önemi olmadığı, diğer karelere göre ne olduğu önemli olduğu anlamına gelir:

Başlangıçta, her bir karenin flex-büyüme oranı 1'dir, yani toplam 6'dır. Yani bizim konteynerimiz 6 parçaya bölünmüştür. Her kare, kaptaki mevcut alanın 1 / 6'sını kaplayacaktır.

Üçüncü karenin flex-büyümesi 2 olduğunda, konteyner 7 parçaya (1 + 1 + 2 + 1 + 1 + 1) bölünür.

Şimdi üçüncü kare alanın 2 / 7'sini kaplıyor, geri kalanı - her biri 1/7.

Flex-Grow'un yalnızca ana eksen için çalıştığını hatırlamakta fayda var (yönünü değiştirene kadar).

Flex küçültmek

Flex-shrink, flex-Grow'un tam tersidir. Karenin boyutunun ne kadar küçültülebileceğini belirler.

Flex-shrink, öğeler kaba sığmadığında kullanılır.

Hangi öğelerin küçülmesi ve hangilerinin küçülmemesi gerektiğini siz belirlersiniz. Her kare için varsayılan esnek küçültme değeri 1'dir. Bu, kap küçüldükçe karelerin de küçüleceği anlamına gelir.

Flex-Grow ve flex-shrink'i 1'e ayarlayalım:

Şimdi üçüncü karenin flex-shrink değerini 0 olarak değiştirelim. Daralması engellendi, bu yüzden genişliği 120px olarak kalacak:

Flex-shrink'in orantılı olduğunu hatırlamakta fayda var. Yani, kare 6'ya eşit esnek-daralmaya sahipse ve diğerleri 2'ye eşitse, bu, karemizin diğerlerinden üç kat daha hızlı küçüleceği anlamına gelir.

Esnek

Flex, esnek büyüme, esnek küçültme ve esnek temelin yerini alır.

Varsayılan değerler 0 (büyüme) 1 (küçültme) ve otomatik (temel) şeklindedir.

İki kare oluşturalım:

Kare # bir (esnek: 2 1 300 piksel;). Kare # iki (esnek: 1 2 300 piksel;)

Her iki kare de aynı esnek temele sahiptir. Bu, her ikisinin de 300 piksel genişliğinde olacağı anlamına gelir (kapsayıcı genişliği: 600 piksel artı kenar boşluğu ve dolgu).

Ancak kap boyut olarak büyümeye başladığında, ilk kare (en büyük esnek büyümeye sahip) iki kat daha hızlı büyüyecek ve ikinci kare (en büyük esnek-küçülme ile) iki kat daha hızlı küçülecektir.

İşler nasıl büyür ve küçülür

İlk kare büyüdüğünde ikinci karenin iki katı, ikinci kare küçüldüğünde ise birincinin yarısı kadar büyüklüğe sahip değildir. Bunun nedeni, esnek büyüme ve esnek küçültmenin büyüme ve daralma oranından sorumlu olmasıdır.

Biraz matematik

İlk konteyner boyutu: 640px. Dolgu için her iki taraftan 20px çıkarın ve sadece iki kare için 600px kaldı.

Konteynerin genişliği 430 piksel (210 piksellik bir kayıp) olduğunda, ilk kare (esnek küçültme: 1) 70 piksel kaybeder. İkinci kare (esnek küçültme: 2) 140 piksel kaybeder.

Kapsayıcı 340 piksel küçüldüğünde 300 piksel kaybediyoruz. İlk kare 100 piksel, ikincisi 200 piksel kaybediyor.

Aynı şey flex-Grow ile de olur.

Flexbox Yerleşim modülü (Esnek Kutu), boyutları bilinmese ve / veya dinamik (dolayısıyla "esnek" kelimesi) olsa bile, bir kaptaki öğeler arasında boş alanı konumlandırmanın, hizalamanın ve dağıtmanın daha verimli bir yolunu sağlamayı amaçlamaktadır.

Esnek düzenlerin arkasındaki ana fikir, konteynere, mevcut alanı en iyi şekilde doldurmak için (esas olarak tüm ekran türlerine ve boyutlarına uyacak şekilde) öğelerinin genişliğini / yüksekliğini (ve sırasını) değiştirme yeteneği vermektir. Bir flexbox konteyneri, öğeleri boş alanı dolduracak şekilde genişletir veya taşmayı önlemek için küçültür.

En önemlisi, Flexbox, geleneksel düzenlerden (dikey konumlandırmaya dayalı kutular ve yatay konumlandırmaya dayalı satır içi öğeler) farklı olarak yönden bağımsızdır. Yeterince iyi çalışsalar da, büyük veya karmaşık uygulamaları destekleme esnekliğinden yoksundurlar (özellikle yeniden yönlendirme, yeniden boyutlandırma, esnetme, küçültme vb. Söz konusu olduğunda).

Not. Flexbox, uygulama bileşenleri ve küçük mizanpajlar için daha uygundur, CSS Grid ise daha büyük mizanpajlar içindir.

Temel bilgiler ve terminoloji

Flexbox tam bir modül olduğundan ve ayrı bir özellik olmadığından, bir sürü özellik dahil olmak üzere birçok farklı şey içerir. Bazıları kapsayıcılarına ("esnek kapsayıcı" olarak bilinen üst öğe) ayarlanacak şekilde tasarlanırken, diğerleri çocuklara ("esnek öğeler" olarak bilinir) ayarlanacak şekilde tasarlanmıştır.

Geleneksel yerleşim sistemi kutu ve satır içi yönlere dayanırken, Flexbox "esnek akış yönlerine" dayanır. Flexbox'ın arkasındaki temel fikri açıklamak için lütfen spesifikasyondan bu şekle bir göz atın.

Temel olarak, öğeler birlikte yer alacaktır. ana eksen (ana başlangıçtan ana uca) veya enine eksen (baştan sona kadar).

Tarayıcı desteği

CSS Esnek Kutu Yerleşim Modülü

Android için Chrome

Blackberry tarayıcısı, sürüm 10'dan başlayarak yeni sözdizimini desteklemektedir.

Konteynerin özellikleri

Elemanların özellikleri

Üst Öğe Özellikleri (Esnek Kapsayıcı)

görüntüle

Bir esnek kapsayıcı tanımlar; dize veya blok aktarılan değere bağlıdır. Tüm doğrudan çocukları için esnek bağlam içerir.

Kapsayıcı (ekran: flex; / * veya inline-flex * /)

CSS sütunlarının esnek kapsayıcıyı etkilemediğini lütfen unutmayın.

esnek yön

Ana ekseni ayarlar, böylece kapta bulunan elemanların yönünü belirler. Flexbox (isteğe bağlı paketleyicinin yanı sıra) tek yönlü bir düzen konseptidir. Esnek öğeleri öncelikle yatay sıralar veya dikey sütunlar olarak düşünün.

Kapsayıcı (esnek yönü: satır | satır tersi | sütun | sütun tersi;)

• satır (varsayılan) - ltr'de soldan sağa; rtl'de sağdan sola;
• sıra ters - ltr'de sağdan sola; rtl'de soldan sağa;
• sütun - satırla aynı, yalnızca yukarıdan aşağıya;
• sütun ters - sıranın tersi ile aynı, sadece aşağıdan yukarıya;

esnek sarma

Varsayılan olarak, öğeler yalnızca bir satırı doldurmaya çalışır. Bu davranışı değiştirebilir ve gerekirse öğelerin sonraki satıra kaydırılmasına izin verebilirsiniz.

Kapsayıcı (flex-wrap: nowrap | wrap | wrap-reverse;)

• nowrap (varsayılan) - tüm esnek öğeler tek bir satırda yer alacaktır;
• paketlemek - esnek öğeler, yukarıdan aşağıya birçok satıra yerleştirilecektir;
• ters sarma - esnek öğeler, alttan üste birden çok satıra yerleştirilecektir;

haklı içerik

Ana eksen boyunca hizalamayı belirler. Bu, tüm sabit ve sabit olmayan esnek öğeler maksimum boyutlarına ulaştıktan sonra kalan boş alanı dağıtmaya yardımcı olur. Ayrıca, çizgiyi aştıklarında elemanların hizalanması üzerinde bir miktar kontrol sağlamanıza yardımcı olur.

Kapsayıcı (yaslama içeriği: flex-start | flex-end | center | space-between | space-around;)

• flex-start (varsayılan) - elemanlar satırın başına bastırılır;
• esnek uç - elemanlar satırın sonuna kadar basılır;
• merkez - elemanlar çizgi boyunca ortalanır;
• arasındaki boşluk - elemanlar hatta eşit olarak yerleştirilir; ilk öğe satırın başında, son öğe satırın sonundadır;
• boşluk - öğeler, çevrelerinde aynı boşluk olan bir çizgi üzerine eşit şekilde yerleştirilir. Lütfen görsel olarak alanın aynı olmadığını, tüm elemanların her iki tarafta aynı boşluğa sahip olduğunu unutmayın. Birinci elemanın, kabın yanında bir birim boşluğu olacaktır, ancak bununla bir sonraki eleman arasında iki birim olacaktır, çünkü sonraki elemanın her iki tarafında da bir birim vardır.

hizalama öğeleri

Bu özellik, esnek öğelerin geçerli satırdaki çapraz eksen boyunca nasıl davrandığını belirler. Bunu sadece enine eksen için (ana eksene dik) olarak düşünün.

Kapsayıcı (öğeleri hizala: flex-start | flex-end | center | baseline | stretch;)

• esnek başlangıç \u200b\u200b- elemanlar enine eksenin başlangıcına yerleştirilir;
• esnek uç - elemanlar enine eksenin sonuna yerleştirilir;
• merkez - elemanlar enine eksenin merkezinde bulunur;
• temel - öğeler taban çizgisine hizalanır;
• streç (varsayılan) - tüm kabı doldurmak için gerin (yine de minimum genişlik / maksimum genişliğe saygı gösterin);

hizalama içeriği

Not. Bu özelliğin, yalnızca bir esnek öğe satırı olduğunda hiçbir etkisi yoktur.

Kapsayıcı (hizalama içeriği: flex-start | flex-end | center | space-between | space-around | streç;)

• esnek başlangıç - çizgiler kabın başında bulunur;
• esnek uç - çizgiler kabın sonunda bulunur;
• merkez - çizgiler kabın ortasına yerleştirilir;
• arasındaki boşluk - satırlar eşit olarak dağıtılır, ilk satır konteynerin başında ve son satır sondadır;
• boşluk - çizgiler, aralarında aynı mesafe olacak şekilde eşit olarak dağıtılır;
• streç (varsayılan) - çizgiler kalan alanı kaplayacak şekilde tüm genişlik boyunca gerilir;

Çocuklar için özellikler (esnek öğeler)

sipariş

Varsayılan olarak, tüm öğeler orijinal sıralarına göre düzenlenir. Bununla birlikte, order özelliği, elemanların kap içinde düzenlenme sırasını kontrol eder.

Öğe (sipariş: ; }

esnek büyüme

Özellik, gerekirse elemanın boyut olarak büyüme yeteneğini belirler. Elemanın kap içinde ne kadar boş alan kaplaması gerektiğini belirleyen oran olarak birimsiz bir değer alır.

Tüm öğelerde esnek büyüme değeri 1 olarak ayarlanmışsa, kabın içindeki boş alan tüm öğeler arasında eşit olarak dağıtılacaktır. Öğelerden birinin değeri 2 ise, öğe diğerlerinden iki kat daha fazla yer kaplayacaktır (en azından deneyecektir).

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

Negatif sayılar belirtilemez.

esnek tabanlı

Kalan alan ayrılmadan önce öğenin varsayılan boyutunu belirler. Uzunluk (% 20, 5rem vb.) Veya bir anahtar kelime olabilir. Auto anahtar sözcüğü "genişlik veya yükseklik özelliğime benziyor" anlamına gelir. İçerik anahtar kelimesi, "boyut, öğenin içeriğine bağlıdır" anlamına gelir - bu anahtar kelime henüz çok iyi desteklenmemektedir, bu nedenle test etmesi ve kardeşlerinin min-content, max-content ve fit-content ne olduğunu bilmek daha da zordur. yapıyorlar.

Öğe (esnek tabanlı: | Oto; / * varsayılan otomatik * /)

0 olarak ayarlanırsa, içeriğin etrafındaki fazladan boşluk sayılmaz. Otomatik olarak ayarlanırsa, değere göre fazladan alan tahsis edilecektir.

esnek

Bu, ve için kısaltmadır. İkinci ve üçüncü parametreler (flex-shrink ve flex-base) isteğe bağlıdır. Varsayılan 0 1 otomatiktir.

Öğe (esnek: yok | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

hizalanmak

Bu özellik, bağımsız esnek öğeler için varsayılan (veya özellik grubu) hizalamayı geçersiz kılmanıza olanak tanır.

Mevcut değerleri anlamak için lütfen mülkün açıklamasına bakın.

Öğe (kendini hizala: otomatik | esnek başlangıç \u200b\u200b| esnek uç | merkez | taban çizgisi | uzat;) .item (kendini hizala: otomatik | esnek başlangıç \u200b\u200b| esnek uç | merkez | taban çizgisi | uzat;)

Float, clear ve dikey hizalamanın esnek öğe üzerinde hiçbir etkisi olmadığını unutmayın.

Örnekleri

Hemen hemen her gün ortaya çıkan bir sorunu çözen en basit örnekle başlayalım: mükemmel merkezleme. Flexbox kullanıyorsanız daha kolay olamazdı.

Üst (ekran: esnek; yükseklik: 300px;). Çocuk (genişlik: 100px; yükseklik: 100px; kenar boşluğu: otomatik;)

Esnek kabın ekstra alanı emen otomatik marjına bağlıdır. Bu nedenle, dikey kenar boşluğunu bir öğe üzerinde otomatik olarak ayarlamak, öğenin her iki eksende de mükemmel bir şekilde ortalanmasını sağlayacaktır.

Şimdi birkaç özellik daha kullanalım. Hepsi estetik olarak sabit boyutta olan 6 öğeden oluşan bir liste düşünün, ancak bunlar otomatik olabilir. Yatay eksen boyunca eşit aralıklarla yerleştirilmelerini ve tarayıcı yeniden boyutlandırıldığında iyi olmasını istiyoruz (medya sorguları yok!).

Flex-container (display: flex; flex-flow: satır kaydırma; yaslama içeriği: boşluk etrafında;)

Bitti! Diğer her şey sadece bir tasarım problemidir. Aşağıda CodePen ile ilgili bir örnek verilmiştir, oraya gittiğinizden emin olun ve ne olacağını görmek için pencereleri yeniden boyutlandırmayı deneyin.

Başka bir şey deneyelim. Ekranın en üstünde sağa hizalı bir navigasyonumuz olduğunu hayal edin, ancak orta boyutlu ekranlarda ortalanmasını ve küçük ekranlarda bir sütun olmasını istiyoruz. Basit.

Gezinme (display: flex; flex-flow: row wrap; justify-content: flex-end;) @media all ve (max-width: 800px) (.navigation (justify-content: space-around;)) @media all ve (max-width: 500px) (.navigation (flex-direction: column;))

Esnek ürünlerimizin esnekliği ile oynayarak daha da iyi bir şeyler yapmaya çalışalım! Öğelerin orijinal sırasına bağlı olmaksızın, tam genişlikte üstbilgi ve altbilgi içeren üç sütunlu mobil öncelikli bir düzene ne dersiniz?

Sarmalayıcı (ekran: esnek; esnek akış: satır kaydırma;) .header, .main, .nav, .aside, .footer (flex: 1% 100;) @media all ve (min-genişlik: 600px) (.aside (esnek: 1 otomatik;)) @media all ve (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (sıra: 1;) .main (sıra: 2;) .aside- 2 (sıra: 3;] .footer (sıra: 4;))

İlgili özellikler

Hatalar

Flexbox kesinlikle hatasız değildir. Gördüğüm en iyi koleksiyon Philip Walton ve Greg Whitworth'un Flexbugs'larından geliyor.Tüm hataları takip etmek için Açık Kaynak kodlu bir yer, bu yüzden bence en iyisi bir bağlantı göndermek.

Merhaba habr!

Pek iyi olmayan güzel bir akşam, sohbetimiz 2012 baharında yazdığı bir yayının yazarından yeniden yapılmış bir makale yazmak için bir teklif aldı, ancak FlexBox kullanımı ve neyin ve nasıl çalıştığına ilişkin bir açıklama. . Belli bir şüpheden sonra, spesifikasyonu daha derinlemesine anlama ilgisi kazandı ve bu örnekleri dizmek için mutlu bir şekilde oturdum. Bu alana daldırma sırasında, birçok nüans netleşmeye başladı ve bu da, düzenleri yeniden düzenlemekten daha fazlası haline geldi. Genel olarak, bu makalede "CSS Esnek Kutu Yerleşim Modülü" adlı harika bir özellikten bahsetmek ve bazı ilginç özelliklerini ve uygulama örneklerini göstermek istiyorum. İlgilenen herkesi nazikçe habrakata davet ediyorum.

Dikkatinizi çekmek istediğim şey, FlexBox'taki mizanpajın düzeni için geliştiricinin bir dereceye kadar uyarlamaya ihtiyacı olacaktır. Kendi örneğimle, uzun yıllara dayanan deneyimin acımasız bir şaka yaptığını hissettim. FlexBox, öğelerin akışına ilişkin biraz farklı bir anlayış gerektirir.

Teknik bölüm

Bazı örneklere geçmeden önce, bu spesifikasyona hangi özelliklerin dahil edildiğini ve nasıl çalıştıklarını anlamaya değer. Bazıları başlangıçta çok net olmadığından ve bazıları gerçeklikle ilgisi olmayan efsanelerle çevrilidir.

Yani. FlexBox'ta iki ana öğe türü vardır: Flex Container ve alt öğeleri, Flex Öğeler. Konteyneri başlatmak için css aracılığıyla öğeye atamanız yeterlidir. ekran: esnek; veya ekran: satır içi esnek;... Flex ve inline-flex arasındaki fark, display: block; bloğu gibi, yalnızca konteyneri çevreleyen öğelerle etkileşim ilkesindedir; ve display: inline-block; sırasıyla.

Esnek bir kap içinde, ana eksen ve dikey veya çapraz eksen olmak üzere iki eksen oluşturulur. Çoğunlukla esnek elemanlar, tam olarak ana eksen boyunca ve daha sonra çapraz eksen boyunca hizalanır. Varsayılan olarak, ana eksen yataydır ve soldan sağa ve çapraz eksen dikeydir ve yukarıdan aşağıya doğru uzanır.

Eksenlerin yönü bir css özelliği kullanılarak kontrol edilebilir esnek yön... Bu özellik birkaç değer alır:
kürek çekmek (varsayılan): Esnek kabın ana ekseni, geçerli satır yönü modunun satır içi ekseniyle aynı yönlendirmeye sahiptir. Ana eksen yönünün başlangıcı (ana-başlangıç) ve bitişi (ana-uç), satır içi eksenin başlangıcına (satır içi-başlangıç) ve bitişine (satır içi-bitiş) karşılık gelir.
sıra ters: Her şey sıradakiyle aynıdır, yalnızca ana başlangıç \u200b\u200bve ana uç değiştirilir.
sütun: satırla aynı, yalnızca şimdi ana eksen yukarıdan aşağıya doğru yönlendirilir.
sütun ters: Sıra tersi ile aynı, yalnızca ana eksen aşağıdan yukarıya doğrudur.
Nasıl çalıştığı jsfiddle'daki örnekte görülebilir.

Varsayılan olarak, bir konteynerdeki tüm flex öğeler, konteynere sığmasalar bile, sınırlarının ötesine geçerek tek satırda istiflenir. Bu davranış özelliği kullanılarak açılıp kapatılır esnek sarma... Bu özelliğin üç durumu vardır:
şimdi tuzak (varsayılan): esnek öğeler soldan sağa tek satırda sıralanır.
paketlemek: flex öğeler çok satırlı modda çizilir, aktarım yukarıdan aşağıya çapraz eksen yönünde gerçekleştirilir.
ters sarma: sarma ile aynıdır, ancak aşağıdan yukarıya doğru sarma gerçekleşir.
Bir örnek görelim.

Kolaylık sağlamak için ek bir mülk var esnek akış, aynı anda belirtebileceğiniz esnek yön ve esnek sarma... Şöyle görünüyor: esnek akış:

Kaptaki öğeler, özelliği kullanarak kendilerini hizalamaya borçludur haklı içerik ana eksen boyunca. Bu özellik, beş farklı değer alır.
esnek başlangıç (varsayılan): esnek öğeler, ana eksenin başlangıcına hizalanır.
esnek uç: öğeler ana eksenin sonuna hizalanır
merkez: öğeler ana eksenin ortasına hizalanır
arasındaki boşluk: elemanlar kabın tüm mevcut genişliğini kaplar, dış elemanlar kabın kenarlarına sıkıca bastırılır ve boş alan elemanlar arasında eşit olarak dağıtılır.
boşluk: flex öğeler, boş alan öğeler arasında eşit olarak dağıtılacak şekilde hizalanır. Ancak, kabın kenarı ile en dıştaki elemanlar arasındaki boşluğun, sıranın ortasındaki elemanlar arasındaki boşluğun yarısı kadar olacağını belirtmekte fayda var.
Elbette, bu mülkün nasıl çalıştığına dair bir örnek mümkündür.

Hepsi bu kadar değil, aynı zamanda elemanları çapraz eksen boyunca hizalama yeteneğine de sahibiz. Mülkü uygulayarak hizalama öğeleriBu da beş farklı anlama gelir, ilginç davranışlar elde edebilirsiniz. Bu özellik, bir satırdaki öğeleri birbirine göre hizalamanıza olanak tanır.
esnek başlangıç: tüm elemanlar satırın başına basılır
esnek uç: elemanlar satırın sonuna kadar basılır
merkez: öğeler çizginin ortasına hizalanır
temel: öğeler metnin taban çizgisine hizalanır
uzatmak (varsayılan): öğeler tüm satırı dolduracak şekilde uzar.

Bir öncekine benzer bir başka özellik ise hizalama içeriği... Tek başına tüm hatları esnek konteynere göre hizalamaktan sorumludur. Esnek öğeler aynı satırdaysa hiçbir etkisi olmayacaktır. Özellik altı farklı değer alır.
esnek başlangıç: tüm çizgiler çapraz eksenin başlangıcına basılır
esnek uç: tüm çizgiler çapraz eksenin sonuna doğru bastırılır
merkez: Tüm çizgiler çapraz eksenin merkezinde hizalanır
arasındaki boşluk: çizgiler yukarıdan aşağıya doğru dağıtılır ve çizgiler arasında boşluk bırakılırken dış çizgiler kabın kenarlarına bastırılır.
boşluk- Çizgiler, konteyner boyunca eşit aralıklarla yerleştirilmiştir.
uzatmak (varsayılan): çizgiler tüm kullanılabilir alanı dolduracak şekilde uzar.
Bu örnekte, hizalama öğelerinin ve içeriğin hizalanmasının nasıl çalıştığını deneyebilirsiniz. Bu iki özelliği, her biri kendi görevini yerine getiren oldukça sıkı bir şekilde etkileşime girdikleri için bir örnekte özellikle sundum. Öğeler bir ve birkaç satıra yerleştirildiğinde ne olduğuna dikkat edin.

Esnek kabın parametrelerini bulduk, esnek elemanların özelliklerini anlamaya devam ediyor.
İlk tanışacağımız mülk sipariş... Bu özellik, akıştaki belirli bir öğenin konumunu değiştirmenize olanak tanır. Varsayılan olarak, tüm esnek öğelerde sıra: 0; ve doğal akış sırasına göre inşa edilmiştir. Örnekte, farklı sipariş değerleri uygulandığında öğelerin nasıl değiştirildiğini görebilirsiniz.

Ana özelliklerden biri esnek tabanlı... Bu özellik ile flex öğenin taban genişliğini belirleyebiliriz. Varsayılan oto... Bu özellik ile yakından ilgilidir esnek büyüme ve esnek küçültmek, bundan biraz sonra bahsedeceğim. Genişliği px,%, em ve diğer birimler cinsinden kabul eder. Aslında, bu kesinlikle esnek öğenin genişliği değil, bir tür başlangıç \u200b\u200bnoktasıdır. Hangi elemanın gerildiği veya büzüldüğü ile ilgili. Otomatik modda, öğe, içindeki içeriğe göre bir taban genişliği alır.

esnek büyüme birkaç kaynakta tamamen yanlış bir açıklama var. Kaptaki öğelerin boyutlarının oranını sözde ayarladığını söylüyor. Aslında durum bu değil. Bu özellik, kapta boş alan olduğunda bir elemanın büyüme faktörünü ayarlar. Varsayılan olarak, bu özellik 0'a ayarlanmıştır. 500 piksel genişliğinde, içinde her biri 100 piksel taban genişliğine sahip iki esnek öğe bulunan bir esnek kapsayıcımız olduğunu varsayalım. Bu, kapsayıcıda 300 piksel boş alan bırakır. İlk öğe esnek büyümeye ayarlanmışsa: 2 ve ikinci öğe esnek büyümeye ayarlanmışsa: 1;. Sonuç olarak, bu bloklar, kabın mevcut tüm genişliğini kaplayacak, yalnızca ilk bloğun genişliği 300px olacak ve ikincisi sadece 200px olacaktır. Ne oldu? Olan şey, kapsayıcıdaki kullanılabilir 300 piksel boş alanın öğeler arasında 2: 1, birinci için + 200 piksel ve ikinci için + 100 piksel oranında dağıtılmasıydı. Aslında bu nasıl işliyor.

Burada başka bir benzer mülke sorunsuz bir şekilde geçiyoruz, yani esnek küçültmek... Varsayılan olarak 1 değerine sahiptir. Ayrıca, yalnızca ters yönde elemanların genişliğini değiştirme faktörünü de ayarlar. Konteynerin genişliği varsa daha az elemanların taban genişliğinin toplamından daha fazla, bu durumda bu özellik etkili olur. Örneğin, bir kapsayıcı 600 piksel genişliğinde ve öğelerin esnek temeli 300 piksel genişliğindedir. İlk öğe flex-shrink: 2; ve ikinci flex-shrink: 1;. Şimdi kabı 300 piksel küçültün. Bu nedenle, elemanların genişliklerinin toplamı, kaptan 300 piksel daha büyüktür. Bu fark 2: 1 oranında dağıtılır, ilk bloktan 200px, ikinciden 100px çıkardığımız ortaya çıkıyor. Elemanların yeni boyutu, birinci ve ikinci eleman için sırasıyla 100px ve 200px'dir. Flex-shrink'i 0 olarak ayarlarsak, öğenin taban genişliğinden daha az küçülmesini engelleriz.

Aslında bu, genel ilkenin açık olması için, hepsinin nasıl çalıştığının çok basitleştirilmiş bir açıklamasıdır. Daha ayrıntılı olarak, ilgilenen varsa, algoritma şartnamede açıklanmıştır.

Her üç özellik de ifade kullanılarak kısaltılmış biçimde yazılabilir. esnek... Şöyle görünüyor:
esnek: ;
Ayrıca iki kısaltılmış versiyon daha yazabiliriz, flex: otomatik; ve flex: yok;bunun anlamı esnek: 1 1 otomatik; ve esnek: 0 0 otomatik; sırasıyla.

Esnek öğelerin son özelliği hizalanmak... Burada her şey basit, kapsayıcıdaki öğeleri hizalamakla aynıdır, bu da belirli bir öğe için hizalamayı geçersiz kılmanıza olanak tanır.

Bundan yoruldum! Örnekler ver!

Teknik kısmı anladık, oldukça uzun sürdü, ama anlamanız gerekiyor. Şimdi pratik uygulamaya geçebilirsiniz.
Bu "gerçekten kullanışlı beş duyarlı düzen şablonunun" düzeni sırasında, bir geliştiricinin oldukça sık karşılaştığı tipik durumları çözmek zorunda kaldım. Flexbox, bu çözümleri daha kolay ve daha esnek hale getirir.
Aynı 4. düzeni alalım çünkü en ilginç unsurlara sahiptir.

Başlangıç \u200b\u200bolarak sayfanın ana genişliğini tanımlayalım, merkeze hizalayalım ve sayfanın alt kısmına altbilgiye basalım. Genel olarak her zaman olduğu gibi.

Html (arka plan: #ccc; min-yükseklik: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: column;) body (margin: 0; padding: 0 15px ; display: -webkit-flex; display: flex; flex-direction: column; flex: auto;) .header (width: 100%; max-width: 960px; min-width: 430px; margin: 0 auto 30px; dolgu : 30px 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; box-boyutlandırma: border-box;) .main (genişlik:% 100; maks. Genişlik : 960px; min-genişlik: 430px; kenar boşluğu: otomatik; esnek büyütme: 1; kutu boyutlandırma: kenarlık kutusu;) .footer (arka plan: # 222; genişlik:% 100; maks. Genişlik: 960px; minimum genişlik : 430px; renk: #eee; kenar boşluğu: otomatik; dolgu: 15px; kutu boyutlandırma: kenarlık kutusu;)

Flex-Grow for.main'i belirttiğimiz için: 1; tüm mevcut yüksekliğine kadar uzanır ve böylece altbilgiyi aşağı doğru iter. Bu çözümdeki bonus, altbilginin sabit olmayan yükseklikte olabilmesidir.

Şimdi başlığa logo ve menüyü yerleştirelim.
.logo (yazı tipi boyutu: 0; kenar boşluğu: -10px 10px 10px 0; display: flex; flex: none; align-items: center;) .logo: before, .logo: after (content: ""; display: block ;) .logo: before (arkaplan: # 222; genişlik: 50px; yükseklik: 50px; kenar boşluğu: 0 10px 0 20px; sınır yarıçapı:% 50;) .logo: sonra (arka plan: # 222; genişlik: 90px; yükseklik : 30px;) .nav (kenar boşluğu: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap;) .nav-itm (arka plan: # 222; genişlik: 130px; yükseklik: 50px; yazı tipi boyutu: 1.5rem; renk: #eee; metin-dekorasyon: yok; kenar boşluğu: 5px 0 0 5px; ekran: -webkit-flex; ekran: esnek; yaslama içeriği: merkez; hizalama öğeleri: merkez; )

Başlık flex-wrap olduğundan: wrap; ve içerik-yasla: boşluk-arasında; Logo ve menü, başlığın farklı taraflarına dağılmıştır, menü için yeterli alan yoksa, logo altında zarif bir şekilde kayacaktır.

Dahası, büyük bir gönderi veya afiş görüyoruz, özü değil, spesifik olarak ne olduğunu söylemekte zorlanıyorum. Sağda bir resim ve solda başlığı olan bir metin var. Uyarlanabilir düzen veya statik olup olmadığına bakılmaksızın, herhangi bir öğenin olabildiğince esnek olması gerektiği fikrine şahsen bağlıyım. Bu yazıda, resmin yerleştirildiği bir kenar çubuğumuz var, kesinlikle hangi genişliğe ihtiyacımız olduğunu kesin olarak söyleyemeyiz, çünkü bugün büyük bir resmimiz var, yarın küçük bir resim ve her seferinde yeniden yapmak istemiyoruz sıfırdan eleman. Bu, ihtiyaç duyduğu yeri almak için yan çubuğa ihtiyacımız olduğu anlamına gelir ve yerin geri kalanı içeriğe gider. Öyleyse hadi yapalım:

Kutu (yazı tipi boyutu: 1.25rem; satır yüksekliği: 1.5; yazı tipi stili: italik; kenar boşluğu: 0 0 40px -50px; ekran: -webkit-flex; ekran: flex; flex-wrap: wrap; yaslama içeriği: center;) .box-base (margin-left: 50px; flex: 1 0 430px;) .box-side (margin-left: 50px; flex: yok;) .box-img (maks. genişlik:% 100; yükseklik : Oto;)

Başlığın ve metnin olduğu .box tabanında görebileceğiniz gibi, taban genişliğini şu şekilde belirledim: esnek tabanlı: 430px;ve ayrıca bloke büzülmesini kullanmak yasaktır esnek küçültme: 0;... Bu manipülasyon ile içeriğin 430 piksel genişliğinden daha az olamayacağını söyledik. Ve .box için belirttiğim gerçeği ışığında esnek sarma: sarma; kenar çubuğunun ve içeriğin container.box'a sığmadığı anda, kenar çubuğu otomatik olarak içeriğin altına düşecektir. Ve bunların hepsi başvuru olmadan @ media! Bunun gerçekten çok havalı olduğunu düşünüyorum.

Hala üç sütunlu içeriğimiz var. Bu sorunun birkaç çözümü var, bunlardan birini göstereceğim, düzenlerin geri kalanında başka bir seçenek var.
Bir kapsayıcı oluşturun, onu .content olarak adlandırın ve yapılandırın.
.content (margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap;)

Kapsayıcıda .banners, .posts, .comments olmak üzere üç sütun vardır.
.banners (flex: 1 1 200px;) .posts (margin: 0 0 30px 30px; flex: 1 1 200px;) .comments (margin: 0 0 30px 30px; esnek: 1 1 200px;)

Sütunları, gerektiğinde birbirlerinin altına taşımak daha iyi olsa bile, sütunların çok fazla düz daralmaması için 200px taban genişliğine ayarladım.

Düzene göre, içerikli @ media olmadan yapamayız, o halde sütunların davranışını genişlik için biraz daha ayarlayalım.<800px и <600px.
@media ekranı ve (max-width: 800px) (.banners (margin-left: -30px; display: -webkit-flex; display: flex; flex-base: 100%;) .posts (margin-left: 0; )) @media ekranı ve (max-width: 600px) (.content (display: block;) .banners (marj: 0; display: block;) .comments (marj: 0;))

FlexBox'ta yerleşim düzeni söz konusu olduğunda tüm sihir budur. Sevdiğim bir diğer zorluk ise özellikle içerik uyarlaması için 5. düzende.

Masaüstü çözünürlüğünde yazıların arka arkaya üçlü bir ızgarada nasıl oluşturulduğunu görebiliriz. Görüntü alanı genişliği 800 pikselin altına düştüğünde ızgara, gönderi fotoğrafının gönderi içeriğinin sol ve sağ taraflarında dönüşümlü olarak sıralandığı bir sütuna dönüşür. Ve genişlik 600 pikselden azsa, gönderinin fotoğrafı tamamen gizlenir.
.grid (display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between;) .grid-itm (margin-bottom: 30px; flex-base: calc (33.33% - 30px * 2/3); display: -webkit-flex; display: flex; flex-wrap: wrap;) .grid-img (margin: 0 auto 20px; flex: 0 1 80%;) .grid-cont (flex: 0 1% 100;) .grid-title (text-align: center;) @media ekranı ve (max-width: 800px) (.grid-itm (flex-wrap: nowrap; flex-base: 100%;). grid-img (flex: 0 0 auto;) .grid-itm: nth-child (çift) .grid-img (margin: 0 0 0 30px; order: 2;) .grid-itm: nth-child (tek) .grid-img (margin: 0 30px 0 0;) .grid-cont (flex: 1 1 auto;) .grid-title (text-align: left;)) @media ekranı ve (maks. genişlik: 600px) ( .grid-img (ekran: yok;))

Aslında bu, FlexBox ile yapabileceklerinizin sadece küçük bir kısmı. Spesifikasyon, basit kod kullanırken çok karmaşık sayfa düzenleri oluşturmanıza olanak tanır.

Merhaba habr!

Güzel bir akşam, pek de iyiye işaret etmeyen sohbetimiz, 2012 baharında kendisi tarafından yeniden yapılmış bir makale yazmak için yazılan "Gerçekten faydalı 5 uyarlanabilir biçimlendirme şablonunu koda çeviriyoruz" adlı yayının yazarından bir teklif aldı, ancak FlexBox kullanarak ve neyin ve nasıl çalıştığına ilişkin bir açıklama. Belli bir şüpheden sonra, spesifikasyonu daha derinlemesine inceleme ilgisi kazandı ve bu örnekleri dizmek için mutlu bir şekilde oturdum. Bu alana dalma sırasında, birçok nüans netleştirilmeye başlandı ve bu da, düzenleri yeniden düzenlemekten daha fazlası haline geldi. Genel olarak, bu yazıda "CSS Esnek Kutu Düzen Modülü" adı verilen harika bir özellikten bahsetmek ve bazı ilginç özelliklerini ve uygulama örneklerini göstermek istiyorum. İlgilenenler, sizi habrakata davet ediyorum.

Dikkatinizi çekmek istediğim şey, FlexBox'taki mizanpajın düzeni için geliştiricinin bir dereceye kadar uyarlamaya ihtiyacı olacaktır. Kendi örneğimle, uzun yıllara dayanan deneyimin acımasız bir şaka yaptığını hissettim. FlexBox, öğelerin akışına ilişkin biraz farklı bir anlayış gerektirir.

Teknik bölüm

Bazı örneklere geçmeden önce, bu spesifikasyona hangi özelliklerin dahil edildiğini ve nasıl çalıştıklarını anlamaya değer. Bazıları başlangıçta çok net olmadığından ve bazıları gerçeklikle ilgisi olmayan efsanelerle çevrilidir.

Yani. FlexBox'ta iki ana öğe türü vardır: Flex Container ve alt öğeleri, Flex Öğeler. Konteyneri başlatmak için css aracılığıyla öğeye atamanız yeterlidir. ekran: esnek; veya ekran: satır içi esnek;... Flex ve inline-flex arasındaki fark, display: block; bloğu gibi, yalnızca konteyneri çevreleyen öğelerle etkileşim ilkesindedir; ve display: inline-block; sırasıyla.

Esnek bir kap içinde, ana eksen ve dikey veya çapraz eksen olmak üzere iki eksen oluşturulur. Çoğunlukla esnek elemanlar, tam olarak ana eksen boyunca ve daha sonra çapraz eksen boyunca hizalanır. Varsayılan olarak, ana eksen yataydır ve soldan sağa ve çapraz eksen dikeydir ve yukarıdan aşağıya doğru uzanır.

Eksenlerin yönü bir css özelliği kullanılarak kontrol edilebilir esnek yön... Bu özellik birkaç değer alır:
kürek çekmek (varsayılan): Esnek kabın ana ekseni, geçerli satır yönü modunun satır içi ekseniyle aynı yönlendirmeye sahiptir. Ana eksen yönünün başlangıcı (ana-başlangıç) ve bitişi (ana-uç), satır içi eksenin başlangıcına (satır içi-başlangıç) ve bitişine (satır içi-bitiş) karşılık gelir.
sıra ters: Her şey sıradakiyle aynıdır, yalnızca ana başlangıç \u200b\u200bve ana uç değiştirilir.
sütun: satırla aynı, yalnızca şimdi ana eksen yukarıdan aşağıya doğru yönlendirilir.
sütun ters: Sıra tersi ile aynı, yalnızca ana eksen aşağıdan yukarıya doğrudur.
Nasıl çalıştığı jsfiddle'daki örnekte görülebilir.

Varsayılan olarak, bir konteynerdeki tüm flex öğeler, konteynere sığmasalar bile, sınırlarının ötesine geçerek tek satırda istiflenir. Bu davranış özelliği kullanılarak açılıp kapatılır esnek sarma... Bu özelliğin üç durumu vardır:
şimdi tuzak (varsayılan): esnek öğeler soldan sağa tek satırda sıralanır.
paketlemek: flex öğeler çok satırlı modda çizilir, aktarım yukarıdan aşağıya çapraz eksen yönünde gerçekleştirilir.
ters sarma: sarma ile aynıdır, ancak aşağıdan yukarıya doğru sarma gerçekleşir.
Bir örnek görelim.

Kolaylık sağlamak için ek bir mülk var esnek akış, aynı anda belirtebileceğiniz esnek yön ve esnek sarma... Şöyle görünüyor: esnek akış:

Kaptaki öğeler, özelliği kullanarak kendilerini hizalamaya borçludur haklı içerik ana eksen boyunca. Bu özellik, beş farklı değer alır.
esnek başlangıç (varsayılan): esnek öğeler, ana eksenin başlangıcına hizalanır.
esnek uç: öğeler ana eksenin sonuna hizalanır
merkez: öğeler ana eksenin ortasına hizalanır
arasındaki boşluk: elemanlar kabın tüm mevcut genişliğini kaplar, dış elemanlar kabın kenarlarına sıkıca bastırılır ve boş alan elemanlar arasında eşit olarak dağıtılır.
boşluk: flex öğeler, boş alan öğeler arasında eşit olarak dağıtılacak şekilde hizalanır. Ancak, kabın kenarı ile en dıştaki elemanlar arasındaki boşluğun, sıranın ortasındaki elemanlar arasındaki boşluğun yarısı kadar olacağını belirtmekte fayda var.
Elbette, bu mülkün nasıl çalıştığına dair bir örnek mümkündür.

Hepsi bu kadar değil, aynı zamanda elemanları çapraz eksen boyunca hizalama yeteneğine de sahibiz. Mülkü uygulayarak hizalama öğeleriBu da beş farklı anlama gelir, ilginç davranışlar elde edebilirsiniz. Bu özellik, bir satırdaki öğeleri birbirine göre hizalamanıza olanak tanır.
esnek başlangıç: tüm elemanlar satırın başına basılır
esnek uç: elemanlar satırın sonuna kadar basılır
merkez: öğeler çizginin ortasına hizalanır
temel: öğeler metnin taban çizgisine hizalanır
uzatmak (varsayılan): öğeler tüm satırı dolduracak şekilde uzar.

Bir öncekine benzer bir başka özellik ise hizalama içeriği... Tek başına tüm hatları esnek konteynere göre hizalamaktan sorumludur. Esnek öğeler aynı satırdaysa hiçbir etkisi olmayacaktır. Özellik altı farklı değer alır.
esnek başlangıç: tüm çizgiler çapraz eksenin başlangıcına basılır
esnek uç: tüm çizgiler çapraz eksenin sonuna doğru bastırılır
merkez: Tüm çizgiler çapraz eksenin merkezinde hizalanır
arasındaki boşluk: çizgiler yukarıdan aşağıya doğru dağıtılır ve çizgiler arasında boşluk bırakılırken dış çizgiler kabın kenarlarına bastırılır.
boşluk- Çizgiler, konteyner boyunca eşit aralıklarla yerleştirilmiştir.
uzatmak (varsayılan): çizgiler tüm kullanılabilir alanı dolduracak şekilde uzar.
Bu örnekte, hizalama öğelerinin ve içeriğin hizalanmasının nasıl çalıştığını deneyebilirsiniz. Bu iki özelliği, her biri kendi görevini yerine getiren oldukça sıkı bir şekilde etkileşime girdikleri için bir örnekte özellikle sundum. Öğeler bir ve birkaç satıra yerleştirildiğinde ne olduğuna dikkat edin.

Esnek kabın parametrelerini bulduk, esnek elemanların özelliklerini anlamaya devam ediyor.
İlk tanışacağımız mülk sipariş... Bu özellik, akıştaki belirli bir öğenin konumunu değiştirmenize olanak tanır. Varsayılan olarak, tüm esnek öğelerde sıra: 0; ve doğal akış sırasına göre inşa edilmiştir. Örnekte, farklı sipariş değerleri uygulandığında öğelerin nasıl değiştirildiğini görebilirsiniz.

Ana özelliklerden biri esnek tabanlı... Bu özellik ile flex öğenin taban genişliğini belirleyebiliriz. Varsayılan oto... Bu özellik ile yakından ilgilidir esnek büyüme ve esnek küçültmek, bundan biraz sonra bahsedeceğim. Genişliği px,%, em ve diğer birimler cinsinden kabul eder. Aslında, bu kesinlikle esnek öğenin genişliği değil, bir tür başlangıç \u200b\u200bnoktasıdır. Hangi elemanın gerildiği veya büzüldüğü ile ilgili. Otomatik modda, öğe, içindeki içeriğe göre bir taban genişliği alır.

esnek büyüme birkaç kaynakta tamamen yanlış bir açıklama var. Kaptaki öğelerin boyutlarının oranını sözde ayarladığını söylüyor. Aslında durum bu değil. Bu özellik, kapta boş alan olduğunda bir elemanın büyüme faktörünü ayarlar. Varsayılan olarak, bu özellik 0'a ayarlanmıştır. 500 piksel genişliğinde, içinde her biri 100 piksel taban genişliğine sahip iki esnek öğe bulunan bir esnek kapsayıcımız olduğunu varsayalım. Bu, kapsayıcıda 300 piksel boş alan bırakır. İlk öğe esnek büyümeye ayarlanmışsa: 2 ve ikinci öğe esnek büyümeye ayarlanmışsa: 1;. Sonuç olarak, bu bloklar, kabın mevcut tüm genişliğini kaplayacak, yalnızca ilk bloğun genişliği 300px olacak ve ikincisi sadece 200px olacaktır. Ne oldu? Olan şey, kapsayıcıdaki kullanılabilir 300 piksel boş alanın öğeler arasında 2: 1, birinci için + 200 piksel ve ikinci için + 100 piksel oranında dağıtılmasıydı. Aslında bu nasıl işliyor.

Burada başka bir benzer mülke sorunsuz bir şekilde geçiyoruz, yani esnek küçültmek... Varsayılan olarak 1 değerine sahiptir. Ayrıca, yalnızca ters yönde elemanların genişliğini değiştirme faktörünü de ayarlar. Konteynerin genişliği varsa daha az elemanların taban genişliğinin toplamından daha fazla, bu durumda bu özellik etkili olur. Örneğin, bir kapsayıcı 600 piksel genişliğinde ve öğelerin esnek temeli 300 piksel genişliğindedir. İlk öğe flex-shrink: 2; ve ikinci flex-shrink: 1;. Şimdi kabı 300 piksel küçültün. Bu nedenle, elemanların genişliklerinin toplamı, kaptan 300 piksel daha büyüktür. Bu fark 2: 1 oranında dağıtılır, ilk bloktan 200px, ikinciden 100px çıkardığımız ortaya çıkıyor. Elemanların yeni boyutu, birinci ve ikinci eleman için sırasıyla 100px ve 200px'dir. Flex-shrink'i 0 olarak ayarlarsak, öğenin taban genişliğinden daha az küçülmesini engelleriz.

Aslında bu, genel ilkenin açık olması için, hepsinin nasıl çalıştığının çok basitleştirilmiş bir açıklamasıdır. Daha ayrıntılı olarak, ilgilenen varsa, algoritma şartnamede açıklanmıştır.

Her üç özellik de ifade kullanılarak kısaltılmış biçimde yazılabilir. esnek... Şöyle görünüyor:
esnek: ;
Ayrıca iki kısaltılmış versiyon daha yazabiliriz, flex: otomatik; ve flex: yok;bunun anlamı esnek: 1 1 otomatik; ve esnek: 0 0 otomatik; sırasıyla.

Esnek öğelerin son özelliği hizalanmak... Burada her şey basit, kapsayıcıdaki öğeleri hizalamakla aynıdır, bu da belirli bir öğe için hizalamayı geçersiz kılmanıza olanak tanır.

Bundan yoruldum! Örnekler ver!

Teknik kısmı anladık, oldukça uzun sürdü, ama anlamanız gerekiyor. Şimdi pratik uygulamaya geçebilirsiniz.
Bu "gerçekten kullanışlı beş duyarlı düzen şablonunun" düzeni sırasında, bir geliştiricinin oldukça sık karşılaştığı tipik durumları çözmek zorunda kaldım. Flexbox, bu çözümleri daha kolay ve daha esnek hale getirir.
Aynı 4. düzeni alalım çünkü en ilginç unsurlara sahiptir.

Başlangıç \u200b\u200bolarak sayfanın ana genişliğini tanımlayalım, merkeze hizalayalım ve sayfanın alt kısmına altbilgiye basalım. Genel olarak her zaman olduğu gibi.

Html (arka plan: #ccc; min-yükseklik: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: column;) body (margin: 0; padding: 0 15px ; display: -webkit-flex; display: flex; flex-direction: column; flex: auto;) .header (width: 100%; max-width: 960px; min-width: 430px; margin: 0 auto 30px; dolgu : 30px 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; box-boyutlandırma: border-box;) .main (genişlik:% 100; maks. Genişlik : 960px; min-genişlik: 430px; kenar boşluğu: otomatik; esnek büyütme: 1; kutu boyutlandırma: kenarlık kutusu;) .footer (arka plan: # 222; genişlik:% 100; maks. Genişlik: 960px; minimum genişlik : 430px; renk: #eee; kenar boşluğu: otomatik; dolgu: 15px; kutu boyutlandırma: kenarlık kutusu;)

Flex-Grow for.main'i belirttiğimiz için: 1; tüm mevcut yüksekliğine kadar uzanır ve böylece altbilgiyi aşağı doğru iter. Bu çözümdeki bonus, altbilginin sabit olmayan yükseklikte olabilmesidir.

Şimdi başlığa logo ve menüyü yerleştirelim.
.logo (yazı tipi boyutu: 0; kenar boşluğu: -10px 10px 10px 0; display: flex; flex: none; align-items: center;) .logo: before, .logo: after (content: ""; display: block ;) .logo: before (arkaplan: # 222; genişlik: 50px; yükseklik: 50px; kenar boşluğu: 0 10px 0 20px; sınır yarıçapı:% 50;) .logo: sonra (arka plan: # 222; genişlik: 90px; yükseklik : 30px;) .nav (kenar boşluğu: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap;) .nav-itm (arka plan: # 222; genişlik: 130px; yükseklik: 50px; yazı tipi boyutu: 1.5rem; renk: #eee; metin-dekorasyon: yok; kenar boşluğu: 5px 0 0 5px; ekran: -webkit-flex; ekran: esnek; yaslama içeriği: merkez; hizalama öğeleri: merkez; )

Başlık flex-wrap olduğundan: wrap; ve içerik-yasla: boşluk-arasında; Logo ve menü, başlığın farklı taraflarına dağılmıştır, menü için yeterli alan yoksa, logo altında zarif bir şekilde kayacaktır.

Dahası, büyük bir gönderi veya afiş görüyoruz, özü değil, spesifik olarak ne olduğunu söylemekte zorlanıyorum. Sağda bir resim ve solda başlığı olan bir metin var. Uyarlanabilir düzen veya statik olup olmadığına bakılmaksızın, herhangi bir öğenin olabildiğince esnek olması gerektiği fikrine şahsen bağlıyım. Bu yazıda, resmin yerleştirildiği bir kenar çubuğumuz var, kesinlikle hangi genişliğe ihtiyacımız olduğunu kesin olarak söyleyemeyiz, çünkü bugün büyük bir resmimiz var, yarın küçük bir resim ve her seferinde yeniden yapmak istemiyoruz sıfırdan eleman. Bu, ihtiyaç duyduğu yeri almak için yan çubuğa ihtiyacımız olduğu anlamına gelir ve yerin geri kalanı içeriğe gider. Öyleyse hadi yapalım:

Kutu (yazı tipi boyutu: 1.25rem; satır yüksekliği: 1.5; yazı tipi stili: italik; kenar boşluğu: 0 0 40px -50px; ekran: -webkit-flex; ekran: flex; flex-wrap: wrap; yaslama içeriği: center;) .box-base (margin-left: 50px; flex: 1 0 430px;) .box-side (margin-left: 50px; flex: yok;) .box-img (maks. genişlik:% 100; yükseklik : Oto;)

Başlığın ve metnin olduğu .box tabanında görebileceğiniz gibi, taban genişliğini şu şekilde belirledim: esnek tabanlı: 430px;ve ayrıca bloke büzülmesini kullanmak yasaktır esnek küçültme: 0;... Bu manipülasyon ile içeriğin 430 piksel genişliğinden daha az olamayacağını söyledik. Ve .box için belirttiğim gerçeği ışığında esnek sarma: sarma; kenar çubuğunun ve içeriğin container.box'a sığmadığı anda, kenar çubuğu otomatik olarak içeriğin altına düşecektir. Ve bunların hepsi başvuru olmadan @ media! Bunun gerçekten çok havalı olduğunu düşünüyorum.

Hala üç sütunlu içeriğimiz var. Bu sorunun birkaç çözümü var, bunlardan birini göstereceğim, düzenlerin geri kalanında başka bir seçenek var.
Bir kapsayıcı oluşturun, onu .content olarak adlandırın ve yapılandırın.
.content (margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap;)

Kapsayıcıda .banners, .posts, .comments olmak üzere üç sütun vardır.
.banners (flex: 1 1 200px;) .posts (margin: 0 0 30px 30px; flex: 1 1 200px;) .comments (margin: 0 0 30px 30px; esnek: 1 1 200px;)

Sütunları, gerektiğinde birbirlerinin altına taşımak daha iyi olsa bile, sütunların çok fazla düz daralmaması için 200px taban genişliğine ayarladım.

Düzene göre, içerikli @ media olmadan yapamayız, o halde sütunların davranışını genişlik için biraz daha ayarlayalım.<800px и <600px.
@media ekranı ve (max-width: 800px) (.banners (margin-left: -30px; display: -webkit-flex; display: flex; flex-base: 100%;) .posts (margin-left: 0; )) @media ekranı ve (max-width: 600px) (.content (display: block;) .banners (marj: 0; display: block;) .comments (marj: 0;))

FlexBox'ta yerleşim düzeni söz konusu olduğunda tüm sihir budur. Sevdiğim bir diğer zorluk ise özellikle içerik uyarlaması için 5. düzende.

Masaüstü çözünürlüğünde yazıların arka arkaya üçlü bir ızgarada nasıl oluşturulduğunu görebiliriz. Görüntü alanı genişliği 800 pikselin altına düştüğünde ızgara, gönderi fotoğrafının gönderi içeriğinin sol ve sağ taraflarında dönüşümlü olarak sıralandığı bir sütuna dönüşür. Ve genişlik 600 pikselden azsa, gönderinin fotoğrafı tamamen gizlenir.
.grid (display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between;) .grid-itm (margin-bottom: 30px; flex-base: calc (33.33% - 30px * 2/3); display: -webkit-flex; display: flex; flex-wrap: wrap;) .grid-img (margin: 0 auto 20px; flex: 0 1 80%;) .grid-cont (flex: 0 1% 100;) .grid-title (text-align: center;) @media ekranı ve (max-width: 800px) (.grid-itm (flex-wrap: nowrap; flex-base: 100%;). grid-img (flex: 0 0 auto;) .grid-itm: nth-child (çift) .grid-img (margin: 0 0 0 30px; order: 2;) .grid-itm: nth-child (tek) .grid-img (margin: 0 30px 0 0;) .grid-cont (flex: 1 1 auto;) .grid-title (text-align: left;)) @media ekranı ve (maks. genişlik: 600px) ( .grid-img (ekran: yok;))

Aslında bu, FlexBox ile yapabileceklerinizin sadece küçük bir kısmı. Spesifikasyon, basit kod kullanırken çok karmaşık sayfa düzenleri oluşturmanıza olanak tanır.