CSS Flexbox
Flexbox esnek kutu modelidir.Flexbox sayesinde float , clear , position gibi özellikleri kullanmak yerine çok daha kolay işlem yapabiliyoruz.Kullanmak için tek yapmamız gereken display özelliğini flex yapmak.
“Flex Container” ve “Flex Item” Kavramları
Şimdi gelelim Flexbox’un özelliklerine ;
Hem container’in hemde items’lerin kendine ait özellikleri vardır.
Container’in özelliklerinden başlayalım.
flex-direction
.container { flex-direction: row | row-reverse | column | column-reverse; }
flex-direction: row = soldan sağa doğru
flex-direction: row-reverse = sağdan sola doğru
flex-direction: column = yukarıdan aşağıya doğru
flex-direction: column-reverse = aşağıdan yukarıya doğru
flex-wrap
İçindeki itemları container boyutuna göre sırayla sıralanır.
.container { flex-wrap: nowrap | wrap | wrap-reverse; }
flex-wrap: nowrap= Tüm itemlar bir satırda
flex-wrap:wrap = Itemlar satırlara dağıtılır.
flex-wrap: wrap-reverse = Itemlar ters sırada dağıtılır.
flex-flow
flex-direction ve flex-wrap kuralları, flex-flow kısa yazım kuralı ile birlikte yazılabilirler. Bu kısa yazım kuralı, iki kuralın değerlerini aralarında boşluk ile birlikte alır.
justify-content
.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right … + safe | unsafe; }
justify-content: flex-start = Itemlar containerin soluna hizalar.
justify-content:flex-end =Itemlar containerin sağına hizalar.
justify-content:center = Itemlar containerin ortasına hizalar.
justify-content:space-between= Itemlar containere eşit aralıklarla hizalar.
justify-content:space-around =Itemlar etraflarında eşit aralıklar bırakılarak hizalanır.
align-items
.container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe; }
align-items: flex-start = Itemlar containerin tepesine hizalanır.
align-items:flex-end = Itemlar containerin aşağısına hizalanır.
align-items:center = Itemlar containerin ortasına hizalanır.
align-items: stretch = Itemlar container kadar hizalanırlar.
align-items:baseline = Itemlar containerin yazı referansına göre hizalanırlar.
align-content
.container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + … safe | unsafe; }
align-content: flex-start = Itemlar containerin başlangıcında toplanır.
align-content:flex-end = Itemlar containerin bitiminda toplanır.
align-content: center = Itemlar containeri ortalar.
align-content:stretch = Itemlar containeri kaplamak için uzarlar.
align-content:space-between = Itemlar satırlar aralarında boşluk bırakarak toplanırlar.
align-content:space-around = Itemlersatırlar etraflarında eşit boşluk bırakacak şekilde toplanırlar.
Container için özellikler bu kadardı.Şimdi sırada Itemlerin özellikleri var.
Order
Order özelliği sıralamayı elle manuel olarak yapmamıza yarar.
flex-grow
Itemların genişliği , default değerlerinin altına düşene kadar , fazla kalan kısımlar flex-grow değerine göre dağıtılır.
flex-shrink
Item , container içindeki diğer elemanlara göre göreceli olarak nasıl büzüleceğini belirler.
flex-basis
Containerin optimum boyutunu belirlemek için kullanılır. Eğer boş alan var ise Container belirlenen değer kadar genişlikte olacaktır.
flex
Kısa yazım biçimidir.Aslında flex-grow,flex-shring,flex-basis değerlerinden oluşur.
align-self
Bu özellik bir containere varsayılan veya tanımlanan hizalama tanımının dışına çıkma imkanı sağlar.
Kaynakça :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#top-of-site
