CSS Flexbox Temel Özellikler
Selamlar, Css Flexbox’ı öğrenirken kullandığım kaynakları ve notları paylaşacağım umarım faydalı olur.
Flexbox’ın ana dilimizdeki anlaşılır karşılığı esnek kutu düzenidir. Bize esnek kapsayıcı bir kutu içerisinde, node’ların hizalanmasında oldukça fayda sağlamaktadır.
Flex-direction column, row, row-reverse, column-reverse özelliklerini alabilmektedir. Column özelliğini alan kapsayıcı içeriği yukarıdan aşağıya doğru dom’a çizmektedir. Row özelliğini alan kapsayıcı içeriğini sağdan sola doğru dom’a çizmektedir. https://flexboxfroggy.com/ oyunu ile denemeler yaparak konuya daha fazla aşina olabilirsiniz.
Justify-content özelliği, flex-direction özelliğine bağlı olarak child (kapsayıcı elementin altındaki elementler) elementleri hizalar. Varsayılan özelliği flex-start’dır. Flex-start özelliği direction’ı column olan bir kapsayıcıda en üstten aşağıda doğru dikey bir akış sağlar. Yazının başında var olan imajdaki gibi. Space-between özelliği ile elementleri eşit bir şekilde dağıtır. Justify-content’in birçok özelliği bulunmaktadır bunları flexbox-froggy oyunu ile deneyimleyerek öğrenmenizi tavsiye ederim.
Align-items özelliği varsayılan olarak stretch olarak gelmektedir. Bu sebeple ögeler %100 yüksekliktedir. Elemenletlerimizi dikeyde(y ekseni) hizalamamızı sağlamaktadır. Dikeyde hizalamanın koşulu flex-direction row olmasıdır varsayılan olarak row olarak gelmektedir column olarak ayarlarsak align-items yatayda hizalama yapar hale gelecektir.
Align-self özelliği ile spesifik olarak bir child seçerek ona align-items özelliklerinden verebiliriz böylece sadece bir element etkilenir.
Flex-grow, flex-shrink, and flex-basis özellikleri direkt child’lara uygulanmaktadır. Bu özellikleri uygulamak için kapsayıcının flex olması gerekmektedir. Flex-basis, flex-direction değerini referans alarak ya genişliği yada yüksekliği değiştirmektedir. Flex-direction column olursa height özelliğini değiştirmektedir. Flex-grow kapsayıcı içinde boş alanımız varsa o alanı elementlere dağıtmamıza yarayan bir özelliktir. Varsayılan değeri 0'dır spesifik olarak oranları kendimiz ayarlamak istersek büyük değeri alan element daha fazla alan sahibi olur. Flex-shrink özelliği ekran küçüldüğünde, elementlerin ne kadar küçüleceğini belirtmemizi sağlamaktadır. Büyük değer alan element daha fazla küçülecektir.
flex: 1 2 30px; sırayla flex-grow, flex-shrink, flex-basis özelliklerini tek satırda yazarak kullanabilirsiniz.
Order özelliği rakam veya sayı almaktadır minimum değer verilen öge en başa gelir.
flex-wrap:wrap; en önemli özelliklerdendir, örneğin bir satırda elementlerin alt satıra geçmesi gerekiyorsa wrap özelliği ile sıkışan içeriği alt satıra geçirebiliriz.
https://codepen.io/paultrone/pen/xwxNmQ bu adresten flexbox özelliklerini interaktif bir şekilde deneyerek öğrenebilirsiniz.