Bu modern CSS mizanpaj yöntemleri arasındaki farkları pratik bir problemle keşfedin: sütunları sıralama.
CSS mizanpajları söz konusu olduğunda emrinizde olan iki ana araç Grid ve Flexbox'tır. Her ikisi de düzen oluşturma konusunda harika olsalar da, farklı amaçlara hizmet ederler ve farklı güçlü ve zayıf yönlere sahiptirler.
Her iki düzen yönteminin nasıl davrandığını ve birinin diğerinin üzerinde ne zaman kullanılacağını öğrenin.
CSS Flexbox ve Grid'in Farklı Davranışı
Nesneleri görselleştirmeye yardımcı olmak için bir indeks.html Dosyayı tercih ettiğiniz klasöre koyun ve aşağıdaki işaretlemeye yapıştırın:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div><h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>
Her iki div de tamamen aynı çocukları içerir, böylece her birine farklı bir sistem uygulayabilir ve bunları karşılaştırabilirsiniz.
Ayrıca HTML'nin adlı bir stil sayfası dosyasını içe aktardığını da görebilirsiniz. stil.css. Bu dosyayı aynı klasörde oluşturun indeks.html ve içine aşağıdaki stilleri yapıştırın:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Sayfanız şöyle görünmeli:
Şimdi ilkini çevirmek için esnek bir sütuna eklemek için aşağıdaki kodu stil sayfanıza eklemeniz yeterlidir:
.flex-container {
display: flex;
}
Sonuç budur:
esnek konteyner div artık alt öğelerini sütunlar halinde düzenliyor. Bu sütunlar esnek ve duyarlıdır; görünüm alanında mevcut alana göre genişliklerini uyarlarlar. Bu davranış ana davranışlardan biridir. Flexbox'ın arkasındaki temel kavramlar.
Sütunların taşmasını önlemek için esnek konteyner, kullanabilirsiniz esnek ambalaj mülk:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Alt öğelerin bir satıra sığması için yeterli alan yoksa, bunlar artık etrafı saracak ve bir sonraki satıra devam edecektir.
Şimdi ikinciye bir Izgara düzeni uygulayın bu CSS'yi kullanarak:
.grid-container {
display: grid;
}
Grid'in varsayılan davranışı üst üste yığılan satırlar oluşturduğundan, yalnızca yukarıdaki bildirimle hiçbir şey olmayacaktır.
Sütun görünümüne geçmek için, ızgara-otomatik-akış mülkiyet (bu sıra varsayılan olarak):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Şimdi sonuç şu:
Her satırda istediğiniz sütun sayısını tam olarak belirtmek için şunu kullanın: ızgara-şablon-sütunları:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Bu değer beş eşit genişlikte sütun oluşturur. Flexbox'a benzer bir sarma davranışı elde etmek için aşağıdaki gibi duyarlı özellikleri kullanabilirsiniz: otomatik uyum Ve en az en çok:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Sık sık Flexbox ve Grid'in sırasıyla tek boyutlu ve iki boyutlu olarak anıldığını duyacaksınız. Ancak bu tam gerçek değil çünkü hem Flexbox hem de Grid iki boyutlu yerleşim sistemi. Bunu farklı şekillerde, farklı kısıtlamalarla yapıyorlar.
En önemli şey, düzenin tek boyutlu yönünü kontrol edebilme şeklinizdir. Örneğin aşağıdaki görseli düşünün:
Izgara sütununun ne kadar tutarlı olduğunu ve Flexbox'taki her sütunun ne kadar düzensiz olduğunu gözlemleyin. Esnek bir kaptaki her satır/sütun diğerinden bağımsızdır. Dolayısıyla bazıları, içeriklerinin boyutuna bağlı olarak diğerlerinden daha büyük olabilir. Bunlar daha az sütunlara ve daha çok bağımsız bloklara benzer.
Izgara, sütunların varsayılan olarak kilitli olduğu bir 2B ızgara ayarlayarak farklı şekilde çalışır. Yukarıdaki resimde gösterildiği gibi, kısa metinli bir sütun, çok daha uzun metinli bir sütunla aynı boyutta olacaktır.
Özetle, CSS Grid biraz daha yapılandırılmıştır, Flexbox ise daha esnek ve duyarlı yerleşim sistemi. Bu alternatif yerleşim sistemleri iyi adlandırılmıştır!
Flexbox Ne Zaman Kullanılmalı?
İçeriklerine göre tanımlandığı şekliyle her sütunun/satırın gerçek boyutuna güvenmek ister misiniz? Yoksa ebeveynin bakış açısına göre yapılandırılmış bir kontrole mi sahip olmak istiyorsunuz? Cevabınız ilk ise Flexbox sizin için mükemmel çözümdür.
Bunu göstermek için yatay bir gezinme menüsü düşünün. İçindeki işaretlemeyi değiştirin şununla etiketler:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
CSS dosyasındaki işaretlemeyi şununla değiştirin:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
İşte sonuç:
Şimdi, aşağıdaki CSS'yi ekleyerek ilk gezinmeyi esnek bir düzene, ikincisini ise ızgara düzenine dönüştürün:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Hangisinin daha uygun olduğunu görmek için sonuçları karşılaştırın:
Yukarıdaki görüntüden Flexbox'ın bu durumda mükemmel çözüm olduğunu görebilirsiniz. Yan yana gitmek ve kendi boyutlarını korumak istediğiniz öğeleriniz var (metin uzunluğuna bağlı olarak büyük veya küçük). Izgara ile her hücrenin sabit bir genişliği vardır ve en azından düz metin bağlantılarıyla o kadar iyi görünmez.
CSS Izgarası Ne Zaman Kullanılır?
Grid'in gerçekten üstün olduğu noktalardan biri, ebeveynden katı bir sistem oluşturmak istediğiniz zamandır. Buna bir örnek, farklı miktarlarda içerik içerseler bile eşit genişlikte olması gereken bir dizi kart öğesidir.
İçindeki işaretlemeyi değiştirin şununla etiketler:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
Bu CSS'yi ekleyin:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Nasıl göründüğünü görmek için bir Flexbox ekranıyla başlıyorsunuz, böylece onu ızgara ekranıyla karşılaştırabilirsiniz. İşte çıktı:
Flexbox'ın iyi idare ettiği içsel boyut nedeniyle son sütunun diğerlerinden nasıl daha büyük olduğuna dikkat edin. Ancak Flexbox kullanarak bunları aynı genişlikte yapmak için aşağıdakileri ekleyerek bu içsel boyutlandırmaya karşı çıkmanız gerekir:
.columns > * {
flex: 1;
}
Bu işe yarar. Ancak Grid bu gibi durumlar için daha uygundur. Sadece sütun sayısını belirtin ve hazırsınız:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
İşte sonuç:
Grid kullanmanın bir diğer avantajı da ebeveynin çocukların düzenini kontrol etmesidir. Böylece düzeni bozma endişesi duymadan alt öğeleri ekleyip kaldırabilirsiniz.
Peki Grid veya Flexbox'ı Ne Zaman Kullanmalısınız?
Özetle, CSS Grid, ebeveynin bakış açısına göre, tek tek içeriklerinin boyutundan bağımsız olarak eşit boyutta sütunlara sahip yapılandırılmış bir kontrol istediğinizde harikadır.
Öte yandan Flexbox, elemanların içsel boyutlandırmasına dayalı daha esnek bir sistem istediğinizde idealdir.
