CSS Flexbox

Flexbox nedir?

Sahinomer
4 min readJan 9, 2021

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

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

--

--

Sahinomer
Sahinomer

Written by Sahinomer

Frontend Developer at Octovan | Computer Engineer

No responses yet