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

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.