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:
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
