CSS Esnek Kutu Düzeni - CSS Flexible Box Layout

Yaygın olarak Flexbox olarak bilinen CSS Esnek Kutu Düzeni , bir CSS 3 web düzeni modelidir. Bu içinde W3C 'adayı tavsiye (CR) aşaması. Esnek yerleşim düzeni, bir kap içindeki duyarlı öğelerin ekran boyutuna (veya cihaza) bağlı olarak otomatik olarak düzenlenmesine izin verir .

Kavramlar

Çoğu web sayfası, HTML (Köprü Metni Biçimlendirme Dili) ve CSS (Basamaklı Stil Sayfaları) kombinasyonuyla yazılır . Kısaca, HTML sayfanın içeriğini ve mantıksal yapısını belirtirken, CSS nasıl göründüğünü belirtir : renkleri, yazı tipleri, biçimlendirmesi, düzeni ve stili.

CSS esnek kutu mizanpajı, HTML sayfalarının mizanpajını belirlemenin özel bir yoludur.

Flex düzeninin en tanımlayıcı özelliklerinden biri, görüntüleme ortamına bağlı olarak form uydurma yeteneğidir. Esnek kutular, alanı gereksiz yere tekelleştirmekten kaçınmak için küçültüp veya sınırları içinde kısıtlanacak içeriklere yer açmak için artarak boyut olarak ayarlanabilir. Dahası, esnek düzen, içerik akışı açısından, örneğin genellikle tek yönlü olan blok ve satır içi görüntüleme türlerinden daha az kısıtlayıcıdır. Esnek yönlü akış sağa, sola, yukarı veya aşağı olarak belirtilebilir. Bir esnek kap içindeki tek tek öğeler, mevcut yerleşim alanına uyacak şekilde otomatik olarak yeniden sıralanabilir ve yeniden düzenlenebilir.

Tarih

2000'lerde Web'in mobil aracılar tarafından yoğun kullanımı , artan ekran boyutları çeşitliliği için "akışkan düzenleri" ve duyarlı öğeleri motive etti . 2010'larda, Bootstrap gibi popüler JavaScript mizanpaj çerçevelerinin yoğun kullanımı, CSS esnek kutusu ve ızgara düzeni spesifikasyonlarına ilham verdi.

CSS 3 modülleri, flexbox ve grid gibi buna benzer çözümler içeriyordu .

Eylül 2020 itibarıyla, yüklü tarayıcıların% 98,69'u (masaüstü tarayıcıların% 99,29'u ve mobil tarayıcıların% 100'ü) CSS Esnek Kutu Düzenini desteklemektedir.

Terminoloji

Aşağıdaki terimler flexbox yerleşim modeliyle ilişkilidir.

Flex konteyner

Tüm esnek öğeleri tutan ana öğe. CSS görüntüleme özelliğini kullanarak, kap flex veya inline-flex olarak tanımlanabilir.

Esnek öğe

Flex kapsayıcı içinde tutulan herhangi bir doğrudan alt öğe esnek bir öğe olarak kabul edilir. Kap öğesi içindeki herhangi bir metin bilinmeyen bir esnek öğeye sarılır.

Eksenler

Her esnek kutu iki eksen içerir: ana ve çapraz eksenler. Ana eksen öğeleri birbirleriyle hizaya hangi eksendir. Çapraz eksen ana eksene diktir.

Esnek yön

Ana ekseni oluşturur. Olası argümanlar: satır (varsayılan), satır-ters, sütun, sütun-ters.

İçeriği yasla

Geçerli satırda içeriğin ana eksene nasıl yerleştirileceğini belirler. İsteğe bağlı argümanlar: sol, sağ, merkez, ara boşluk, boşluk etrafında.

Öğeleri hizala

Esnek öğelerin her satırda çapraz eksene nasıl yerleştirileceğine ilişkin varsayılanı belirler.

Hizalama içeriği

Çapraz eksen çizgilerinin nasıl hizalanacağına ilişkin varsayılanı belirler.

Kendini hizala

Çapraz eksen boyunca tek bir öğenin nasıl yerleştirileceğini belirler. Bu, hizalama öğeleri tarafından belirlenen varsayılanları geçersiz kılar.

Talimatlar

çapraz başlangıç

çapraz uç

Çapraz başlat / çapraz uç tarafları esnek çizgiler gelen esnek eşyalarla dolu olsun yeri belirlemek uç geçmeye çapraz başlatın.

ana başlangıç

ana uç

Ana-başlat / ana uç kenarları ana başlangıç ucundan başlayan ve ana uç uca gidiyor, flex kapsayıcı içindeki esnek öğeleri yerleştirerek başlamak için yeri belirlemek.

Sipariş

Öğeleri gruplara yerleştirir ve kapsayıcı içinde hangi sıraya yerleştirileceklerini belirler.

Esnek akış

Esnek içeriği yerleştirmek için kısayollar esnek yön ve esnek sarma.

Çizgiler

Çizgiler

Flex öğeleri, hem çapraz eksenin yönünü hem de kabın içinde çizgilerin nasıl yığıldığını kontrol eden flex-wrap özelliği tarafından tanımlandığı gibi tek bir satıra veya birden çok satıra yerleştirilebilir.

Boyutlar

Ana boyut

Çapraz boyut

Ana boyut ve çapraz boyut , esnek kabın yüksekliği ve genişliğidir ve her biri sırasıyla ana ve çapraz eksenlerle ilgilidir.

Kullanım

Bir öğeyi esnek öğe olarak tasarlamak, aşağıdaki gibi, öğenin CSS görüntüleme özelliğinin flex veya inline-flex olarak ayarlanmasını gerektirir:

display: flex;

Veya:

display: inline-flex;

Ekranın yukarıdaki iki değerden birine ayarlanmasıyla, bir öğe esnek bir kap haline gelir ve alt öğeleri esnek öğelerdir. Ekranın esnek olarak ayarlanması, kabı blok düzeyinde bir öğe haline getirirken, ekranı satır içi esnekliğe ayarlamak, kabı satır içi düzeyde bir öğe haline getirir .

Ortaya hizala

Flexbox'ın avantajlarından biri, konteyner içindeki öğeleri hem dikey hem de yatay olarak sayfanın ortasına kolayca hizalayabilmesidir.

display: flex;
align-items: center;
justify-content: center;

Referanslar