CSS

Alt Bilgiyi Altta Tutun: Flexbox vs. Grid

Uzun yıllar boyunca sürekli atıfta bulundum Bu makale Matthew James Taylor tarafından, ana içerik uzunluğundan bağımsız olarak bir web sayfası altbilgisini sayfanın altında tutmak için bir yöntem için. Bu yöntem, ölçeklenebilir olmayan ancak çok iyi bir çözüm olan BF (Flexbox’tan Önce) olan açık bir alt bilgi yüksekliğinin ayarlanmasına dayanıyordu.

Çoğunlukla SPA geliştirme ile ilgileniyorsanız, bu sorunun neden hala etrafta olduğu konusunda kafanız karışabilir, ancak yine de altbilginizi aşağıdakiler için yüzer halde bulma olasılığı vardır:

  • giriş sayfaları
  • blog/haber makaleleri (reklamsız…)
  • eylemleri onaylama gibi bir akışın geçiş sayfaları
  • ürün listeleme sayfaları
  • takvim etkinliği ayrıntıları

Bunu modern CSS ile halletmenin iki yolu vardır: flexbox ve grid.

İşte varsayılan olarak flexbox yöntemine ayarlanmış demo. Codepen’in tamamını açarsanız, $method değişken grid Bu alternatifi görmek için

Her bir yöntem hakkında bilgi edinmek için demoyu okuyun.

Stephanie Eckles (@5t3ph)

Bu yöntem aşağıdakileri tanımlayarak gerçekleştirilir:

body {
min-height: 100vh;
display: flex;
flex-direction: column;
}

footer {
margin-top: auto;
}


main {
margin: 0 auto;
max-width: 80ch;
}

İlk olarak, body eleman en azından ekranın tam yüksekliğine kadar uzayacaktır. min-height: 100vh. İçerik kısaysa bu, taşmayı tetiklemez (istisna: belirli mobil tarayıcılar) ve içeriğin gerektiği gibi yüksekliği uzatmaya devam etmesine izin verecektir.

Ayar flex-direction: column yığılmış blok öğelerini tutma açısından normal belge akışının davranışını korur (bu, body hepsi gerçekten blok öğelerdir).

Flexbox’ın avantajı, margin: auto davranış. Bu garip numara, kenar boşluğunun, ayarlandığı öğe ile en yakın kardeşi arasındaki boşluğu ilgili yönde doldurmasına neden olur. Ayar margin-top: auto altbilgiyi etkili bir şekilde ekranın altına iter.

Demoda ekledim outline ile main flexbox yönteminde olduğunu göstermek için main eleman yüksekliği doldurmuyor. Bu yüzden kullanmak zorundayız margin-top: auto kandırmak. Bunun sizin için önemli olması muhtemel değildir, ancak önemliyse, alanı uzatan ızgara yöntemine bakın. main Mevcut alanı doldurmak için.

Bu yöntem aşağıdakileri ayarlayarak elde edilir:

body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}


main {
margin: 0 auto;
max-width: 80ch;
}

biz tutmak min-height: 100vh bu yöntem için, ancak daha sonra grid-template-rows şeyleri doğru bir şekilde yerleştirmek için.

Bu yöntemin tuhaf numarası, özel ızgara birimini kullanmaktır. fr. bu fr “kesir” anlamına gelir ve onu kullanmak, tarayıcının o sütuna veya satıra dağıtmak için kalan kullanılabilir “kesir” alanını hesaplamasını ister. Bu durumda, üstbilgi ve altbilgi arasındaki tüm kullanılabilir alanı doldurur, bu da flexbox yönteminden “getcha” sorununu çözer.

Izgarayı gördükten sonra, açıkça üstün olduğunu düşündüğünüz bir anınız olabilir. Ancak, üstbilgi ve altbilgi arasına daha fazla öğe eklerseniz, şablonunuzu güncellemeniz gerekir (veya her zaman div iç içe geçmiş anlambilimi/hiyerarşiyi etkilememek için).

Öte yandan, flexbox yöntemi, orta bölümde birden çok blok öğesi bulunan çeşitli şablonlarda kullanılabilir – örneğin, bir dizi <article> tek bir eleman yerine <main> bir arşiv sayfası için.

Yani tüm tekniklerde olduğu gibi, projeye bağlı 🙂 Ama hepimiz bu modern CSS yerleşim yöntemlerine sahip olmanın harika olduğu konusunda hemfikiriz!

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Göz Atın
Kapalı
Başa dön tuşu