Flex ve Grid, karmaşık web düzenleri sağlayan iki düzen teknolojisidir, ancak hangisini ne için kullanıyorsunuz?
Ç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şsunuzdur. Hatta birini veya her ikisini de bir dereceye kadar kullanmış olabilirsiniz. Her ikisi de benzer ancak çok farklı kullanım durumları olan CSS’nin güçlü parçalarıdır.
Flexbox Nedir?
Flexbox, bir süredir var olan tek boyutlu bir CSS düzeni 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 yerleşim, şamandıra ve konum özelliklerinin sinir bozucu ve hantal kullanımını gerektiriyordu.
Flexbox için tarayıcı desteği konusunda endişeleriniz varsa, endişelenmeyin. caniuse.com’a göre , tüm modern tarayıcılar Flexbox’ı destekler.
Flexbox’ın Temelleri
Flexbox birçok CSS özelliği içerirken , temel bilgiler oldukça basittir. Flexbox’ı kullanmak her zaman , stil kurallarına display: flex ekleyerek bir ana kapsayıcıyı esnek kapsayıcı olarak bildirerek başlar . Bunu otomatik olarak yapmak, bu öğenin tüm alt öğelerini esnek öğeler yapar.
Bundan sonra, justify-content özelliğini kullanarak esnek kap içindeki alan dağılımını kontrol edebilirsiniz . align-items özelliğiyle esnek öğelerin hizalamasını kontrol edebilirsiniz .
İşte bir kaptaki alanı çocukları arasında eşit bir şekilde yaymak ve hepsini kabın ortasına hizalamak için Flexbox kullanan bir kod örneği. Bu HTML’dir:
<div class=”container”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Bu CSS’dir:
.container {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
border: 1px solid black;
height: 200px;
}
.container > div {
height: 100px;
width: 100px;
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}
CSS Izgarası Nedir?
CSS Grid, Flexbox’ı tamamlayan bir düzen sistemidir. Flexbox güçlüdür, ancak belirli yerleşim türleri için pek uygun değildir. Tüm bir sayfanın yapısını Flexbox ile düzenlemeye çalışmak, çirkin, anlamsal olmayan biçimlendirme ve sahte CSS içeren sinir bozucu bir göreve dönüşecektir.
CSS Grid, Flexbox’ın yerine geçen bir sistem değil, bazı durumlar için alternatif bir sistemdir.
CSS Grid desteği, Flexbox için olduğu kadar kapsamlı değil, ancak Grid, 2022’de oldukça iyi destekleniyor.
CSS Izgarasının Temelleri
Izgara kavramı basittir. Adından da anlaşılacağı gibi, CSS Grid, bir ana kaptaki alanı, istediğiniz sayıda satır/sütun ile bir satır ve sütun ızgarasına bölmenize olanak tanır. Bundan sonra, üst öğenin ızgarasının satırlarına başvurarak alt öğelerin konumunu belirlersiniz.
Ana kapsayıcıya display: grid ekleyerek başlayın . Ardından, ızgarayı bölmek istediğiniz satırları ve sütunları belirtmek için ızgara şablonu satırları ve ızgara şablonu sütunları özelliklerini kullanın. Daha sonra, ızgarada nerede olmaları gerektiğini söylemek için alt öğelerdeki ızgara sütunu ve ızgara satırı özelliklerini kullanabilirsiniz. Beş elemanlı kurulumu daha önce kullanan, ancak daha karmaşık bir düzenlemede kullanan bir Izgara örneğine bakalım.
İşte HTML:
<div class=”container”>
<div>1</div>
<div class=”two”>2</div>
<div class=”three”>3</div>
<div class=”four”>4</div>
<div class=”five”>5</div>
</div>
İşte CSS:
.container {
display: grid;
width: 100%;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
border: 1px solid black;
height: 300px;
}
.container > div {
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}
.container > .two {
grid-row: 2;
grid-column: 2;
}
CSS Izgarası ayrıca daha karmaşık düzenler oluşturmak için kullanabileceğiniz çok sayıda başka özellik içerir.
Hangisini Kullanmalısınız?
İlk olarak, Flexbox ve Grid’i birlikte kullanmanıza hiçbir şeyin engel olmadığını ve bazı durumlarda bunun en uygun seçim olduğunu unutmamak önemlidir. Bununla birlikte, bu sistemlerin her birinin hangi düzenlerin uygulamaya en uygun olduğu sorusuna cevap verelim.
Flexbox, öğelerin tek bir satırda hizalanmasını ve dağıtılmasını içeren yerleşim planları oluşturmak için en uygunudur. Bu tür yerleşim örnekleri, bir bölümün sonundaki simgeleri hizalamak veya bir gezinme çubuğundaki bağlantıları düzenlemektir.
Öte yandan Grid, öğeleri diğerlerine göre (hem yatay hem de dikey olarak) hassas bir şekilde konumlandırmanız gerektiğinde ve çeşitli ekran boyutlarına kolayca uyum sağlamak için bu konumlandırmaya ihtiyacınız olduğunda en parlak şekilde parlar.
Göstermek için, Flexbox ile Grid örneğinden düzeni yeniden oluşturmak için yazmanız gereken kod burada.
HTML:
<div class=”container”>
<div class=”sub one”>
<div>1</div>
<div>5</div>
</div>
<div class=”sub two”>
<div>2</div>
</div>
<div class=”sub three”>
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.container {
border: 1px solid black;
height: 300px;
}
.sub {
display: flex;
width: 100%;
}
.one, .three {
justify-content: space-between
}
.two {
justify-content: center;
}
.sub > div {
height: 100px;
width: 100px;
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}
Burada dikkat edilmesi gereken en önemli şey, bu kod Grid örneğiyle aynı çıktıyı üretirken, buradaki işaretlemenin önemli ölçüde daha karmaşık olmasıdır. Bu düzeni uygulamak, alt kapsayıcıları gerektirir ve numaralandırılmış div’leri işaretlemede sıra dışı yerleştirmeniz gerekir.
Ayrıca, bu düzeni uygunsuz bir konuma kaydırmanız gerektiğini varsayalım: Diyelim ki 5. div’i 2. div ile hizalayın. Bunun için Flexbox kullanmış olsaydınız, pozisyon: göreli veya benzeri bir şeye başvurmanız gerekirdi. Grid’i kullanarak, ihtiyacınız olan tek şey grid-column özelliğini kaydırmaktır.
Ancak, aksine, Flexbox örneğindeki basit tek satır hizalamasının Grid ile uygulanması çok daha fazla CSS ile sonuçlanacaktır. Grid açıkça bu tür bir düzen için daha az uygundur.
Flexbox ve Grid çoğunlukla birbirlerinin etkilerini çoğaltabilirken, bazı istisnalar vardır. Elemanları üst üste getirmek sadece Flexbox ile oldukça zordur, ancak Grid ile çok kolaydır. Grid ayrıca, Flexbox’ın yaptığı gibi, margin:auto ile öğelerin kendilerini diğer öğelerden uzaklaştırmasına izin vermez.
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 öğeye sahip iki boyutlu düzenler için en iyisidir. Flexbox, yalnızca bir grup öğeyi belirli bir şekilde yerleştirmeniz gereken tek boyutlu veya tek satırlı düzenler için daha iyidir.