Çarpıcı, duyarlı web siteleri oluşturmak istiyorsanız, Flexbox ve CSS Grid hakkında sağlam bir anlayış gereklidir.
Herhangi bir süredir CSS yazıyorsanız, en azından bu terimleri duymuş olma ihtimaliniz yüksektir. Hatta bir dereceye kadar birini veya her ikisini de kullanmış olabilirsiniz. Her ikisi de CSS'nin güçlü parçalarıdır ve benzer ancak ince bir şekilde farklı kullanım durumlarına sahiptir.
Flexbox Nedir?
Flexbox, bir süredir ortalıkta dolaşan tek boyutlu bir CSS mizanpaj yöntemidir. Flexbox'ı, HTML öğelerini bir kapta hizalamak ve aralarındaki boşluğu yönetmek için kullanabileceğiniz bir dizi ilgili CSS özelliği olarak düşünebilirsiniz.
Flexbox'tan önce, bu tür bir düzen, kayan noktanın sinir bozucu ve hantal bir şekilde kullanılmasını gerektiriyordu ve konum özellikleri.
Flexbox için tarayıcı desteği konusunda endişeleriniz varsa, endişelenmeyin. Buna göre caniuse.com, tüm modern tarayıcılar Flexbox'ı destekler.
Flexbox'ın Temelleri
Sırasında Flexbox birçok CSS özelliği içerir, temel bilgiler oldukça basit. Flexbox'ı kullanmak her zaman bir üst kabı, ekleyerek bir esnek kap olarak ilan ederek başlar.
ekran: esnek stil kurallarına göre. Bunu yapmak, otomatik olarak bu öğenin tüm alt öğelerini esnek öğeler yapar.Bundan sonra, flex-container içindeki alan dağıtımını kullanarak kontrol edebilirsiniz. haklı içerik özelliği. ile esnek öğelerin hizalamasını kontrol edebilirsiniz. hizalama öğeleri mülk.
Burada, kapsayıcıdaki alanı çocukları arasında eşit olarak yaymak ve hepsini kabın ortasına hizalamak için Flexbox kullanan bir kod örneği verilmiştir. Bu HTML'dir:
<div sınıfı="konteyner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Bu CSS'dir:
.konteyner {
ekran: esnek;
genişlik: %100;
haklı-içerik: boşluk-etrafında;
hizalama öğeleri: merkez;
kenarlık: 1 piksel düz siyah;
yükseklik: 200 piksel;
}
.konteyner > div {
yükseklik: 100 piksel;
genişlik: 100 piksel;
arka plan rengi: kırmızı;
Beyaz renk;
yazı tipi boyutu: 5rem;
metin hizalama: merkez;
sınır yarıçapı: 5px;
}
Ve işte çıktı:
CSS Izgarası Nedir?
CSS Grid, Flexbox'ı tamamlayan bir düzen sistemidir. Flexbox güçlüdür, ancak belirli düzen türleri için pek uygun değildir. Tüm bir sayfanın yapısını Flexbox ile düzenlemeye çalışmak, sonunda çirkin, anlamsal olmayan biçimlendirme ve hileli CSS içeren sinir bozucu bir görev olacaktır.
CSS Grid, Flexbox yerine geçen bir sistem değil, bazı durumlar için alternatif bir sistemdir.
CSS Grid desteği, Flexbox kadar kapsamlı değildir, ancak Grid, makul derecede iyi desteklenmiş 2022'de.
CSS Izgarasının Temelleri
Izgara kavramı basittir. Adından da anlaşılacağı gibi, CSS Izgarası, bir üst kapsayıcıdaki alanı, istediğiniz sayıda satır/sütun içeren bir satır ve sütun ızgarasına bölmenize olanak tanır. Bundan sonra, ebeveyn ızgarasının satırlarına başvurarak alt öğelerin konumunu belirtirsiniz.
ekleyerek başlayın ekran: ızgara ana kapsayıcıya. Daha sonra ızgara-şablon-satırları Ve ızgara-şablon-sütunları ızgarayı bölmek istediğiniz satırları ve sütunları belirtmek için özellikler. daha sonra kullanabilirsiniz ızgara sütunu Ve ızgara sırası ızgarada nerede olmaları gerektiğini söylemek için alt öğelerdeki özellikler. Daha önceki beş öğe kurulumunu kullanan, ancak daha karmaşık bir düzenlemede olan bir Izgara örneğine bakalım.
İşte HTML:
<div sınıfı="konteyner">
<div>1</div>
<div sınıfı="iki">2</div>
<div sınıfı="üç">3</div>
<div sınıfı="dört">4</div>
<div sınıfı="beş">5</div>
</div>İşte CSS:
.konteyner {
ekran: ızgara;
genişlik: %100;
grid-template-rows: tekrar (3, 1fr);
grid-template-columns: tekrar (3, 1fr);
açıklık: 0.5rem;
kenarlık: 1 piksel düz siyah;
yükseklik: 300 piksel;
}.konteyner > div {
arka plan rengi: kırmızı;
Beyaz renk;
yazı tipi boyutu: 5rem;
metin hizalama: merkez;
sınır yarıçapı: 5px;
}
.konteyner > .iki {
ızgara satırı: 2;
ızgara sütunu: 2;
}
İşte çıktı:
CSS Grid ayrıca çok sayıda daha karmaşık düzenler oluşturmak için kullanabileceğiniz diğer özellikler.
Hangisini Kullanmalısınız?
İlk olarak, hiçbir şeyin Flexbox ve Grid'i birlikte kullanmanızı engelleyemeyeceğini ve bazı durumlarda en iyi seçimin bu olduğunu not etmek önemlidir. Bununla birlikte, bu sistemlerin her birinin hangi düzenlerin uygulamaya en uygun olduğu sorusuna cevap verelim.
Flexbox, öğeleri tek bir satırda hizalamayı ve dağıtmayı içeren mizanpajlar oluşturmak için çok uygundur. Bu tür bir düzene örnek olarak, bir bölümün sonundaki simgeleri hizalamak veya bir gezinti çubuğundaki bağlantıları düzenlemek verilebilir.
Öte yandan ızgara, öğeleri diğerlerine göre tam olarak konumlandırmanız gerektiğinde en parlak şekilde parlar. (hem yatay hem de dikey) ve çeşitli ekran boyutlarına kolayca uyum sağlamak için bu konumlandırmaya ihtiyacınız var.
Göstermek için, Flexbox ile Grid örneğinden mizanpajı yeniden oluşturmak için yazmanız gereken kod burada.
HTML:
<div sınıfı="konteyner">
<div sınıfı="alt bir">
<div>1</div>
<div>5</div>
</div><div sınıfı="alt iki">
<div>2</div>
</div>
<div sınıfı="alt üç">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.konteyner {
kenarlık: 1 piksel düz siyah;
yükseklik: 300 piksel;
}.alt {
ekran: esnek;
genişlik: %100;
}.bir, .üç {
haklı-içerik: boşluk-arasında
}.iki {
haklı içerik: merkez;
}
.alt > div {
yükseklik: 100 piksel;
genişlik: 100 piksel;
arka plan rengi: kırmızı;
Beyaz renk;
yazı tipi boyutu: 5rem;
metin hizalama: merkez;
sınır yarıçapı: 5px;
}
Ve işte çıktı:
Burada dikkat edilmesi gereken en önemli nokta, bu kod Grid örneği ile aynı çıktıyı üretirken buradaki işaretlemenin çok daha karmaşık olmasıdır. Bu düzeni uygulamak, alt kaplar gerektirir ve numaralandırılmış div'leri işaretlemede sıra dışı yerleştirmeniz gerekir.
Ayrıca, bu düzeni garip bir konuma kaydırmanız gerektiğini varsayalım: örneğin 5. div'i 2. div ile hizalayarak. Bunun için Flexbox kullanmış olsaydınız, başvurmanız gerekirdi. pozisyon: göreceli Veya benzeri. Grid'i kullanarak, ihtiyacınız olan tek şey ızgara sütunu mülk.
Ancak bunun aksine, Flexbox örneğindeki basit tek satır hizalamasını Grid ile uygulamak çok daha fazla CSS ile sonuçlanacaktır. Izgara, bu tür bir düzen için açıkça daha az uygundur.
Flexbox ve Grid çoğunlukla birbirlerinin etkilerini çoğaltabilse de bazı istisnalar vardır. Öğeleri üst üste bindirmek yalnızca Flexbox ile oldukça zordur, ancak Grid ile çok kolaydır. Izgara ayrıca, Flexbox'ın yaptığı gibi, öğelerin kendilerini marjlı diğer öğelerden uzaklaştırmasına izin vermez: auto.
Flexbox ve Grid Güçlü Yerleşim Sistemleridir
Flexbox ve CSS Grid, web sayfası içeriğinizi düzenlemeyi kolaylaştıran tasarım sistemleridir. Izgara, birbirine göre tam olarak konumlandırılması gereken birçok öğe içeren iki boyutlu düzenler için en iyisidir. Flexbox, bir grup öğeyi belirli bir şekilde yerleştirmeniz gereken tek boyutlu veya tek satırlı düzenler için daha iyidir.