Esnek css örnekleri kullanan karmaşık düzenler. Flexbox nedir? Tüm css özelliklerinin açıklaması, temel ilkeler, avantajlar ve dezavantajlar
Flexbox, içeriği ne olursa olsun tüm sütunların tam yükseklikte olması gereken üç sütunlu, sözde "Kutsal Kâse" düzeni gibi yaygın olarak kullanılan web sitesi düzenleri oluşturmak için idealdir. aynı zamanda içinde kaynak kodu ana içerik gezinmeden önce gelir ve sayfanın kendisinde ana içerik gezinmeden sonra gelir.
Bunun gibi.
Flexbox'ın ortaya çıkmasından önce, bu tür bir düzeni bir tür hack kullanmadan elde etmek oldukça zordu. Geliştiriciler, içerik miktarı veya ekran boyutu ne olursa olsun her şeyi doğru şekilde hizalamak için genellikle fazladan işaretleme eklemek, negatif kenar boşlukları uygulamak ve diğer hileler yapmak zorunda kaldı. Ancak, yukarıdaki örneğin gösterdiği gibi, flexbox'ta her şey çok daha basit.
İşte kodun bir özeti. Bu örnekte, üstbilgi ve altbilgiyi blok düzeyinde öğeler olarak bırakırken #main öğesini esnek bir kap haline getiriyoruz. Yani sadece orta kısım flexbox oluyor. İşte onu esnek bir kap yapan bir pasaj.
#main (ekran: flex; minimum yükseklik: calc(100vh - 40vh); )
Esnek bir kap yapmak için sadece display: flex kullanıyoruz. Ayrıca min-height değerini calc() işleviyle ayarladığımıza ve #main'i görüntü alanı yüksekliğinin %100'üne ayarladığımıza dikkat edin. eksi kapak ve bodrum yüksekliği (her biri 20vh). Bu, çok az içeriğe sahip olsa bile mizanpajın ekranın tüm yüksekliğini kaplamasını sağlar. Sonuç olarak, içerik ekranın yüksekliğinden daha az yer kaplıyorsa altbilgi asla yükselmeyecek ve altında boş alan bırakmayacaktır.
Tüm öğelere box-sizing: border-box uyguladığımızı düşünürsek, minimum yüksekliği hesaplamak yeterince kolaydı. Yapmasaydık, dolgu değerini çıkarılan miktara eklememiz gerekirdi.
Flex container'ı kurduktan sonra flex itemlerle uğraşıyoruz.
#main > makale ( flex: 1; ) #main > nav, #main > kenara ( flex: 0 0 20vw; arka plan: bej; ) #main > nav ( sipariş: -1; )
flex özelliği, flex-grow , flex-shrink ve flex-basis özelliklerinin kısaltmasıdır. İlk durumda, yalnızca bir değer yazdık, bu nedenle flex, flex-grow özelliğini ayarlar. İkinci durumda, üç değeri de yazdık.
align-content özelliği, boş alan olduğunda enine eksen boyunca esnek kap içindeki çizgilerin hizalama türünü ayarlar.
için geçerlidir: esnek kap.
Varsayılan değer: uzatmak.
Esnek başlangıç Çizgileri, çapraz eksenin başında bulunur. Sonraki her satır bir öncekiyle aynı hizada gider. esnek uç Çizgiler, çapraz eksenin sonundan başlayarak yerleştirilir. Önceki her satır bir sonrakiyle aynı hizada gider. merkez Çizgiler kabın merkezine yerleştirilir. boşluk-arasındaki Çizgiler kapta eşit olarak dağılmıştır ve aralarındaki mesafe aynıdır. boşluk-etrafında Çizgiler, bitişik iki çizgi arasındaki boşluk aynı olacak şekilde eşit olarak dağıtılır. İlk satırdan önceki ve son satırdan sonraki boşluk, bitişik iki satır arasındaki boşluğun yarısına eşittir. boşluk eşit olarak Satırlar eşit olarak dağıtılır. İlk satırdan önceki ve son satırdan sonraki boşluk diğer satırlarla aynı genişlikte. streç Çizgiler, boş alanı doldurmak için eşit şekilde gerilir.
align-content özelliği, çapraz eksende fazladan boşluk olduğunda, justify-content özelliğinin ana eksen içindeki tek tek öğeleri hizalamasına benzer şekilde, esnek kap içindeki çizgileri esnek kap içinde hizalar. Bu özelliğin tek hatlı esnek bir kapsayıcı üzerinde hiçbir etkisi olmadığını unutmayın. Değerler aşağıdaki anlamlara sahiptir:
Not: Yalnızca çok hatlı esnek kaplarda, çapraz eksende hizalanacak çizgiler için boş alan vardır, çünkü tek hatlı esnek bir kapta tek hat, boşluğu doldurmak için otomatik olarak uzar.
için geçerlidir: esnek kaplar.
İlk: uzatmak.
Flex-start Lines, flex konteynerin başlangıcına doğru paketlenir. Esnek kaptaki ilk satırın çapraz başlangıç kenarı, esnek kabın çapraz başlangıç kenarı ile aynı hizada yerleştirilir ve sonraki her satır, önceki satırla aynı hizada yerleştirilir. flex-end Hatlar, flex konteynerin sonuna doğru paketlenir. Son çizginin çapraz kenarı, esnek kabın çapraz kenarı ile aynı hizada yerleştirilir ve önceki her çizgi, sonraki çizgi ile aynı hizada yerleştirilir. merkez Çizgiler, esnek kabın merkezine doğru paketlenir. Esnek kaptaki çizgiler birbiriyle aynı hizada yerleştirilir ve esnek kapsayıcının çapraz başlangıçlı içerik kenarı ile esnek kaptaki ilk çizgi arasında ve esnek kapsayıcının çapraz uç içerik kenarı ve esnek kapsayıcıdaki son satır. (Kalan boş alan negatifse, çizgiler her iki yönde de eşit olarak taşacaktır.) boşluk-arasındaki Çizgiler esnek kapta eşit olarak dağıtılır. Arta kalan boş alan negatifse, bu değer flex-start ile aynıdır. Aksi takdirde, esnek kaptaki ilk satırın çapraz başlangıç kenarı, esnek kaptaki çapraz başlangıç içerik kenarı ile aynı hizada yerleştirilir; esnek kaptaki son satırın çapraz uç kenarı, çapraz- esnek kapsayıcını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ında Çizgiler, her iki uçta yarım boyutlu boşluklar olacak şekilde esnek kapta eşit olarak dağıtılır. Kalan boş alan negatif ise, bu değer merkez ile aynıdır. Aksi takdirde, esnek kaptaki çizgiler, herhangi iki bitişik çizgi arasındaki boşluk 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. eşit aralıklı Çizgiler, esnek kapsayıcıda eşit olarak dağıtılır. Kalan boş alan negatif ise, bu değer merkez ile aynıdır. Aksi takdirde, esnek kapsayıcıdaki çizgiler, her esnek çizgi arasındaki boşluk aynı olacak şekilde dağıtılır. streç Çizgiler, kalan alanı kaplamak için uzar. Kalan boş alan negatifse, bu değer esnek başlatma ile aynıdır. Aksi takdirde, boş alan çapraz boyutlarını artırarak tüm çizgiler arasında eşit olarak bölünür.
Gerçek bir test görevinden bir form örneği kullanarak, size göre nasıl dizileceğini göstereceğim. BEM kullanarak esnek kutu. Soruyorsunuz: "Neden dizgiye göre gerekli? BEM + Esnek Kutu" Bu gereklilik işverenden gelmektedir. Görev Tanımından alıntı: "Çerçevesiz dizgi yapmayı deneyin (tercihen esnek kutu), basit ve net: kullanışsız yapılardan ve fazladan koddan kaçının, metodolojiyi kullanın BEM."
Form içeren bölüm düzeni parçası
Düzen kurallarım
- Düzeni mantıksal bölümlere ayırın
- Her bölüme bir etiketle başlayın bölüm
- ayrı bölümler ve css ayrı yönetilen, boş dize
- Her etikete bir sınıf atayın
- Blok veya öğe için sınıfın adı, soruyu cevaplar - Bu nedir?
- Değiştirici adı soruyu yanıtlar - Hangi?
HTML işaretlemesi
Önce işaretlemeyi yapıyorum, blokların iç içe geçmesini belirliyorum ve sınıflar için isimler buluyorum. Aşağıdaki kodda iki satır içi etiketimiz var - h2 Ve giriş. Satır içi etiketler, yeni başlayan düzen tasarımcıları için bir baş ağrısı ve stres kaynağıdır. Neden? Çok kötü davranırlar - mevcut tüm genişliği almaya çalışırlar, tüm bloğun arka plan rengini ve boyutunu ayarlamanıza izin vermezler.
kişisel bilgi
Kötü bir kodlayıcı bu durumda ne yapar? Satır içi öğeleri blok etiketlerinde sarar div ve gerekli tüm özellikleri sarmalayıcı etiketine ayarlar. Alt satır içi öğeler bu özellikleri devralır. Bir bahçeyi fazla koddan korumaya değer mi? Yetkili bir yerleşim tasarımcısı nasıl hareket edecek? Engellemek veya satır içi bloklamak için bir satır içi öğeyi yeniden tanımlayacaktır. css tüzük.
Ekran bloğu; // giriş etiketi için
ekran: satır içi blok // h2 etiketi için
Yuvalama mantığı ve blok adları
Kişisel bilgileri içeren bir bölüm görüyoruz, bu yüzden bölüme sınıf diyoruz - bilgi. Bölüm üç alt öğeden oluşur:
Simge // sınıf adı info__icon
başlık // bilgi__başlık
form // bilgi_formu
Sınıf adının özü BEM, alt öğenin üst öğeye ait olmasından oluşur. Öğe adlandırılamıyor simge. Bu sadece bir simge değil, bölümden bir simge bilgi.
Bir kişide kızı ve ebeveyni
Engellemek bilgi_formu, bizde özel bir tane var - bölümde yuvalanmıştır bilgi, ancak aynı zamanda form alanları içerir. Bu fenomenin adı çok düzeyli iç içe geçmedir. Formlu blok, dış girintileri kolayca ayarlayabilmeniz için girişler için tamamen sarmalayıcı bir işlev taşır. Sonuçta, küçük harfli girişler çocuklar gibi davranır (ki onlar da öyledir), hiç itaat etmezler. Ayrıca, ikinci giriş diğerlerinden daha kısadır ve yalnızca genişlik olarak farklılık gösterir.
Genişlik hariç, aynı özelliklere sahip tüm girdiler için bir sınıf belirledik - bilgi_girişi. Sıradan girişler, bir değiştirici ekleyin info_input_long ve kısa giriş - değiştirici bilgi_girdi_kısa. Modifiye edici olduğunu hatırlatmama izin verin BEM soruyu cevaplamalı - Hangi?
Değiştiriciler için CSS kuralları
.info__input_long(genişlik: 520 piksel
}
bilgi__input_short(
genişlik: 320 piksel
}
CSS kodu
İÇİNDE HTML işaretleme, sitenin kaba bir yapısını oluşturur; css, öğeleri zaten düzene göre yerleştiriyoruz. Bugün görünüşe değinmeyeceğiz, elemanların konumlandırılmasına odaklanacağız. Bölümümüzde iki adet flex container bulunmaktadır. Tüm elemanların satır başına bir düzenlenmesi ile esneme kullanımının çok şüpheli olduğunu söylemeliyim. Alacağınız tek fayda mülktür. haklı içerik, ortaya hizalama, esnek öğeler. Savunmamda, sadece bu bölüm bağlamında esneme fikrinin anlamsız olduğunu söyleyebilirim. Düzen için gerçek bir düzen genellikle daha fazla çeşitliliğe sahiptir.
bilgi(
ekran:esnek;
haklı içerik: merkez;
hizalama öğeleri: merkez;
esnek yön: sütun;
kenar boşluğu: 77 piksel;
yükseklik: %100;
}
bilgi_formu(
ekran:esnek;
haklı içerik: merkez;
esnek yön: sütun;
yükseklik: %100;
kenar boşluğu: 50 piksel;
Flexbox, haklı olarak, css'de düzenler oluştururken çok çeşitli sorunları çözmek için başarılı bir girişim olarak adlandırılabilir. Ancak açıklamasına geçmeden önce, şimdi kullandığımız yerleşim yöntemlerinde neyin yanlış olduğunu bulalım mı?
Herhangi bir daktilo, bir şeyi dikey olarak hizalamanın veya kauçuk bir orta sütunla 3 sütunlu bir düzen oluşturmanın birkaç yolunu bilir. Ancak tüm bu yöntemlerin oldukça tuhaf olduğunu, hack gibi göründüğünü, her durumda uygun olmadığını, anlaşılması zor olduğunu ve tarihsel olarak gelişen belirli sihirli koşullar karşılanmadığında işe yaramadığını kabul edelim.
Html ve css evrimsel olarak geliştiği için oldu. Başlangıçta, web sayfaları tek iş parçacıklı metin belgelerine benziyordu, kısa bir süre sonra sayfa tablolarla bloklara bölündü, ardından değişkenlerle dizmek moda oldu ve ie6'nın resmi ölümünden sonra satır içi blok hileleri eklendi. Sonuç olarak, mevcut tüm web sayfalarının %99,9'u için mizanpajlar oluşturmak için kullanılan tüm bu tekniklerin patlayıcı bir karışımını miras aldık.
Esnek bir kap içindeki blokların çok satırlı organizasyonu.
esnek sarma
Yukarıda verdiğimiz tüm örnekler, blokların tek sıra (tek sütun) dizilişi dikkate alınarak oluşturulmuştur. Şunu söylemeliyim ki, varsayılan olarak, esnek kapsayıcı içindeki blokları her zaman bir satıra yerleştirir. Bununla birlikte, belirtim çok satırlı modu da destekler. CSS özelliği flex-wrap, esnek bir kap içindeki çok satırdan sorumludur.
Mevcut değerler esnek sarma:
- şimdi rap (varsayılan değer): bloklar soldan sağa bir satırda düzenlenir (rtl'de sağdan sola)
- sarma: bloklar birkaç yatay sıra halinde düzenlenir (eğer bir sıraya sığmazlarsa). Soldan sağa birbirlerini takip ederler (rtl'de sağdan sola)
- ters sarma: ile aynı dürüm, ancak bloklar ters sıradadır.
flex-flow, flex-direction + flex-wrap için kullanışlı bir kısaltmadır
Aslında flex-flow, enine eksenin ana ve çoklu hattının yönünü tek bir özellikte tanımlama yeteneği sağlar. Varsayılan olarak flex-flow: row nowrap .
esnek akış:<‘flex-direction’> || <‘flex-wrap’>
css
/* yani ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* bu aynı... */ .my-flex-block( flex-flow: sütun sarma ;)içeriği hizala
Ayrıca, ortaya çıkan blok sıralarının dikey olarak nasıl hizalanacağını ve esnek kapsayıcının tüm alanını nasıl paylaşacaklarını belirleyen align-content özelliği de vardır.
Önemli: hizalama içeriği yalnızca çok satırlı modda çalışır (yani flex-wrap:wrap; veya flex-wrap:wrap-reverse; durumunda)
Mevcut değerler içeriği hizala:
- flex-start: blok sıraları, esnek kabın başlangıcına itilir.
- esnek uç: blok sıraları, esnek kabın sonuna kadar itilir
- merkez: blok sıraları, esnek kabın merkezindedir
- boşluk-arasında: ilk blok sırası esnek kabın başlangıcında bulunur, son blok sırası sondaki bloktur, diğer tüm sıralar kalan boşlukta eşit olarak dağıtılır.
- boşluk-etrafında: Blok sıraları, tüm boş alanı eşit olarak bölerek, esnek kabın başından sonuna kadar eşit aralıklarla yerleştirilir.
- uzatmak (varsayılan değer): Blok sıraları, mevcut tüm alanı kaplayacak şekilde uzatılır.
Flex-wrap ve align-content CSS özellikleri, alt öğelerine değil, doğrudan esnek kaba uygulanmalıdır.
Flex'te çok satırlı özelliklerin demosu
Bir esnek kapsayıcının (esnek bloklar) alt öğeleri için CSS kuralları
flex-basis - tek bir esnek bloğun temel boyutu
Diğer esnek faktörlere dayalı dönüştürmeler uygulanmadan önce bir esnek kutu için ilk ana eksen boyutunu ayarlar. Herhangi bir uzunluk biriminde (px , em , % , ...) veya otomatik (varsayılan) olarak ayarlanabilir. Otomatik olarak ayarlanırsa blok boyutları (genişlik, yükseklik) esas alınır ve bu da açıkça belirtilmediği takdirde içerik boyutuna bağlı olabilir.
flex-grow - tek bir esnek bloğun "açgözlülüğü"
Gerekirse, tek bir esnek kutunun bitişik öğelerden ne kadar büyük olabileceğini belirler. flex-grow boyutsuz bir değer alır (varsayılan 0)
örnek 1:
- Bir esnek kap içindeki tüm esnek kutularda flex-grow:1 varsa, bunlar aynı boyutta olacaktır
- Bunlardan biri flex-grow:2'ye sahipse, diğerlerinden 2 kat daha büyük olacaktır.
Örnek 2:
- Bir esnek kap içindeki tüm esnek kutularda flex-grow:3 varsa, bunlar aynı boyutta olacaktır.
- Bunlardan birinde flex-grow:12 varsa, diğerlerinden 4 kat daha büyük olacaktır.
Yani, flex-grow'un mutlak değeri tam genişliği belirlemez. Aynı seviyedeki diğer esnek bloklara göre "açgözlülük" derecesini belirler.
flex-shrink - tek bir esnek bloğun "sıkıştırılabilirlik" faktörü
Yeterli boş alan yoksa esnek kutunun, esnek kutunun içindeki bitişik öğelere göre ne kadar küçüleceğini belirler. Varsayılan 1'dir.
flex - flex-grow, flex-shrink ve flex-based özellikleri için kısaltma
esnek: yok | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
css
/* yani ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex base: 30em; ) /* bu aynı... */ .my-flex-block( flex : 12 3 30dk; )Flex-grow, flex-shrink ve flex-basis için demo
align-self - enine eksen boyunca tek bir esnek bloğun hizalanması.
Tek bir esnek kutu için bir esnek kapsayıcının align-items özelliğini geçersiz kılmayı mümkün kılar.
Kullanılabilir kendini hizalama değerleri (hizalama öğeleriyle aynı 5 seçenek)
- flex-start: esnek kutu, çapraz eksenin başlangıcına itilir
- esnek uç: esnek kutu çapraz eksenin sonuna itilir
- merkez: esnek kutu çapraz eksenin ortasına yerleştirilir
- taban çizgisi: taban çizgisine hizalanmış esnek kutu
- uzatmak (varsayılan değer): Esnek kutu, varsa min-genişlik / maks-genişlik dikkate alınarak çapraz eksendeki tüm kullanılabilir alanı kaplayacak şekilde gerilir.
sipariş - esnek kap içindeki tek bir esnek bloğun sırası.
Varsayılan olarak, tüm bloklar html'de verilen sırayla birbirini izleyecektir. Ancak bu sıra order özelliği kullanılarak değiştirilebilir. Bir tamsayı olarak belirtilir ve varsayılan olarak 0'dır.
Sipariş değeri, öğenin dizideki mutlak konumunu belirtmez. Elemanın konumunun ağırlığını belirler.
HTML
Bu durumda bloklar ana eksen boyunca şu sırayla birbirini takip edecektir: item5, item1, item3, item4, item2
align-self ve order için demo
kenar boşluğu: otomatik dikey olarak. Hayaller Gerçekleşiyor!
Flexbox, en azından yatay hizalamanın marj yoluyla herkes tarafından bilindiği için sevilebilir: otomatik, burada dikey için de çalışır!
My-flex-container ( display: flex; height: 300px; /* Veya her neyse */ ) .my-flex-block ( width: 100px; /* Veya her neyse */ height: 100px; /* Veya her neyse * / marjin: auto; /* Sihir! Kutu dikey ve yatay olarak ortalanmıştır! */ )
Hatırlanacak şeyler
- Flexbox'ı ihtiyacınız olmayan yerlerde kullanmamalısınız.
- Yine de birçok durumda bölgelerin tanımlanmasını ve içeriğin yeniden düzenlenmesini sayfanın yapısına bağlı hale getirmekte fayda var. İyice düşün.
- Flexbox'ı anlayın ve temellerini öğrenin. Bu, beklenen sonucu elde etmeyi çok daha kolaylaştırır.
- Kenar boşluklarını unutma. Eksen hizalaması ayarlanırken dikkate alınırlar. Esnek kutu kenar boşluklarının normal akışta olduğu gibi "çökmediğini" unutmamak da önemlidir.
- Esnek blokların kayan değeri dikkate alınmaz ve önemli değildir. Bu, muhtemelen, esnek kutuya geçerken zarif bir bozulma için bir şekilde kullanılabilir.
- flexbox, web bileşenlerini ve web sayfalarının tek tek bölümlerini düzenlemek için çok uygundur, ancak temel düzenleri (makalenin konumu, üst bilgi, alt bilgi, gezinme çubuğu vb.) düzenlerken iyi performans göstermedi. Bu hala tartışmalı bir nokta, ancak bu makale eksiklikleri oldukça ikna edici bir şekilde xanthir.com/blog/b4580 gösteriyor
Nihayet
Flexbox'ın elbette diğer tüm düzen yöntemlerinin yerini almayacağını düşünüyorum, ancak elbette yakın gelecekte çok sayıda görevi çözerken değerli bir niş işgal edecek. Ve kesinlikle, şimdi onunla çalışmayı denemelisin. Aşağıdaki makalelerden biri buna ayrılacaktır. somut örnekler esnek düzen ile çalışın. haberlere abone ol ;)
Hiçbir şey yerinde durmuyor, teknolojiler ve standartlar gelişiyor, site düzeni için yeni teknikler ve yöntemler ortaya çıkıyor, örneğin, dikkate almadığımız tablo öğeleri içeren düzen nesnel nedenler düzen kayan öğelerle değiştirildi.
Birçok kod düzenleyicide, varsayılan olarak yerleşik veya indirilebilen kullanışlı bir Emmet biçimlendirme eklentisi bulunur; bu eklenti, bu örneğin temel biçimlendirmesini aşağıdaki gibi yapmanıza olanak tanır: bölüm>div*3>kuram+ Sekme (değer lorem aşağıdaki resimde gösterilen metni oluşturur).
Küçük bir çabayla, içerikle nasıl doldurulduklarına bakılmaksızın yerleşim sütunlarımızın aynı yükseklikte olmasını sağladık ki bu harika. Elementler
varsayılan olarak esnek öğeler değildir ve akışta bulunur üçüncü eleman
Örneğimizin sonucu:
Satır içi esnek kapsayıcı
Blok elemanlarına benzer şekilde, esnek kaplar satır içi olabilir. Satır içi esnek kaplar ile blok esnek kaplar arasındaki farka bir göz atalım. Önceki örnekte, tıpkı normal bir blok elemanı gibi, ekranın tüm genişliğini kaplayan ve normal bir blok seviyesi elemanı gibi davranan bir blok kapsayıcının kullanımına baktık. Satır içi esnek kaplar söz konusu olduğunda, öğelerin esnekliğini korurken normal satır içi öğeler haline gelirler.
Aşağıdaki örnekte, bu farka bakacağız, çünkü önceki örnek temsili olmayacaktır, çünkü alt esnek öğeler açıkça boyutlandırılmamıştır ve sonuç olarak, ister satır içi ister blok olsun, kapsayıcımız aynı şekilde davranır ve ekranın tüm genişliğini kaplar.
Bu örnekte, yerleştirdiğimiz iki küçük harf ve iki blok flex kapları, içlerine yerleştirdik beş elementler
Kullanarak hızlı bir şekilde benzer bir düzen oluşturmak için Emmet düzenleyiciye şunu yazın: div.inline-flex*2>div*5 + Tab ve aynısını başka bir sınıf div.flex*2>div*5 + Tab ile yapın.
Örneğimizin çıktısına bir göz atın, satır içi ve blok esnek kaplar arasındaki fark artık sizin için açık olmalıdır. Bir satır içi kap, bir satır içi öğe gibi davranır ve yalnızca esnek alt öğelerinin gerektirdiği genişliği kaplarken, esnek alt öğelerinin boyutundan bağımsız olarak bir blok esnek kap, ekranın tüm genişliğini kaplar.
Örneğimizin sonucu:
Pirinç. 205 Satır içi esnek kaplar ile esnek kaplar arasındaki farka bir örnek.
Yön? Hangi yön?
Esnek elemanların yönü, iki eksenin konumuna göre oluşturulur: ana eksen container flex ve onun enine eksen her zaman bulunan ana dik. ltr yönünde ana eksen (global HTML özelliği dir veya ltr değerine sahip yön CSS özelliği) soldan sağa ve çapraz yukarıdan aşağıyadır (bu varsayılan değerdir), rtl değeri için sırasıyla yansıtılır.