justify-content ve align-items nedir, nasıl kullanılır?

CSS hemen hemen her programlama dili gibi yıllardır durmaksızın geliştiriliyor. Bu yazımda Flex modülü ile gelmiş olan 2 özelliği nasıl kullanabileceğimizden bahsedeceğim.

Flex modülü hizalama ve bölümlendirme üzerine çok büyük yeniliklerle geldi. Bunlardan 2’si de justify-content ve align-items özellikleri. Bu iki özellik, nesnelerin yatay ve dikeyde nasıl hizalanacaklarını belirler.

justify-content

Flex özelliğine sahip olan bir kapsayıcının yatay eksende nasıl hizalanacağını ayarlar. Objeler başta mı, ortada mı, sonda mı, aralıklı mı dizileceğine karar vermemizi sağlar. Bu kararı vermek için 5 parametre kullanır:

  • flex-start: Nesneler kapsayıcının başından başlayarak dizilirler.
  • space-around: Nesneler arasında eşit boşluklar bırakılır.
  • space-between: İlk nesne başta, son nesne sonda olacak şekilde nesneler eşit olarak kapsayıcının içerisinde dizilirler.
  • center: Nesneler tam ortalı olacak şekilde hizalanır.
  • flex-end: Son nesne en sağa yaslanacak şekilde hizalanır.

align-items

Bu özellik ise justify-content‘in yatay eksende yaptığı şeyleri dikey eksende yapmaya yarar. Yine aynı şekilde hizalama işlemini dikey eksende nasıl yapmamız gerektiğine karar vermemiz gerekmektedir. Bu özellik de yine 5 parametre kullanır ve bunlardan 3 tanesi justify-content özelliği ile aynıdır.

  • flex-start: Nesneler, kapsayıcının en üstünden başlayarak dizilirler.
  • flex-end: Nesneler, kapsayıcının en altından başlayarak, yukarı doğru dizilirler.
  • center: Nesneler ortalı bir şekilde dikey olarak sıralanırlar.
  • baseline: İlk satırdaki yazı tipi göz önüne alınarak hizalanmaya başlanılır.
  • stretch: Tüm nesneler kapsayıcı yüksekliğine eşit olacak şekilde dizilirler.

Flex modülünün getirdiği özellikleri incelemek için aşağıdaki kaynaklardan yararlanabilirsiniz:

A Complete Guide to Flexbox

https://www.w3schools.com/cssref/css3_pr_flex.asp

http://fatihhayrioglu.com/yenilenmis-flex-modulu/

http://learnlayout.com/flexbox.html

https://developer.mozilla.org/en-US/docs/Web/CSS/flex?v=example

Soft Grid CSS Framework

Front-end projelerinde belirli standartlar kullanılarak projeyi geliştirdiğimiz zaman hem yapısal olarak oturmuş bir şekil ortaya çıkıyor hem de tekrardan düzenlememiz gerektiğinde kolay bir şekilde gerekeni yapabiliyoruz.

Tasarımın yapısını oluştururken belirli bir ızgaraya uygun şekilde yaparsak, hem sabit ölçülere göre işlem yapmış oluruz hem de gözü yormadan ve görünümü göze hoş gelecek şekilde kodlamalar yapmış oluruz.

Ben bu konuda, bu güne kadar çeşitli sistemleri denedim. Yakın zaman önce ise severek takip ettiğim Baran Somaklı tarafından hazırlanmış olan oldukça sade bir Grid Sistem Framework‘ü ile karşılaştım. Birkaç projemde kullandıktan sonra bana çok pratik geldiğini farkettim ve sizinle paylaşmak istedim. Düşük boyuta sahip olduğu için temayı şişirmiyor, 2 küçük düzenleme ile hemen kullanmaya başlayabiliyorsunuz.

Artık, yazın da gelmesiyle birlikte kullandığım, gördüğüm framework‘leri, eklentileri sizlere sunmaya çalışacağım. Grid sistemini, aşağıdaki linke tıklayarak Github üzerinden inceleyebilirsiniz.

Baran Somaklı – Soft Grid CSS Framework