CSS3 Flexbox ile Esnek Kutu Düzeni

Flex değeri ile inline düzeyde esnek eleman oluşturulur “Esnek Kutu” veya “Flexbox” düzen modu, bir web sayfasının genel görünümünü tanımlamak için Float'a alternatif sunar. Float sadece yatay olarak konumlandırmamıza izin verirken, flexbox bize kutularımızın hizalanması, yönü, sırası ve büyüklüğü üzerinde tam bir kontrol sağlıyor.

display

flex: Bu değer ile blok seviyesinde esnek elaman oluşturulur.

inline-flex: Bu değer ile inline düzeyde esnek eleman oluşturulur.

ÖRNEK: 

flex-direction

row: Varsayılan değer. Öğeler, satırda yatay olarak görünür.

row-reverse: Öğeleri tersten sıralar.

column: Öğeler, satırda dikey olarak görünür.

column-reverse: Öğeleri tersten sıralar.

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-direction&preval=row-reverse

flex-wrap

nowrap: Varsayılan değerdir. Tek satırda görünür.

wrap: Çoklu satırda görünür.

wrap-reverse: Öğeleri tersten sıralar.

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-wrap&preval=wrap

flex-flow

flex-direction: Öğelerin kapsayıcıya nasıl yerleştirileceğini belirtir.

flex-wrap: Öğelerin bir alt satıra kaydırılmasından ya da kaydırılmamasından sorumlu değerdir.

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-flow

order

Verilebilecek değerler: -1 | 0 | 1

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.tutorialrepublic.com/codelab.php?topic=css3&file=order-property

justify-content

flex-start: Varsayılan değer. Öğeler, kapsayıcının başlangıcından konumlandırılır.

flex-end: Öğeler, kapsayıcının sonundan konumlandırılır.

center: Öğeler, kapsayıcının ortasında konumlandırılır.

space-between: Öğeler, kapsayıcı içerisinde eşit olarak dağıtılır.

space-around: Sağ ve solda boşluk kalacak şekilde öğeler kapsayıcı içerisinde eşit olarak dağıtılır.

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_justify-content&preval=flex-end

align-items

stretch: Varsayılan değer. Öğeler, kapsayıcıya uyacak şekilde gerilir.

flex-start: Öğeler, kapsayıcının başlangıcından itibaren konumlandırılır.

flex-end: Öğeler, kapsayıcının sonundan itibaren konumlandırılır.

center: Öğeler, kapsayıcının ortasından itibaren konumlandırılır.

baseline: Öğeler, taban çizgileri hizalamaları gibi hizalanır.

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-items&preval=stretch

align-self

flex-start: Öğeler, kapsayıcının başlangıcından itibaren konumlandırılır.

flex-start: Öğeler, kapsayıcının başlangıcından itibaren konumlandırılır.

flex-end: Öğeler, kapsayıcının sonundan itibaren konumlandırılır.

baseline: Öğeler, taban çizgileri hizalamaları gibi hizalanır.

center: Öğeler, kapsayıcının ortasından itibaren konumlandırılır.

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-self

align-content

stretch: Varsayılan değer. Tek satıra sığan öğeler kapsayıcı içerisinde başlangıç konumunda görüntülenir.

center: Öğeler, kapsayıcı içerisinde ortalanır.

flex-start: Öğeler, kapsaıcının başlangıcından itibaren konumlandırılır.

flex-end: Öğeler, kapsayıcının sonundan itibaren konumlandırılır.

space-between: Öğeler, kapsayıcı içerisinde eşit olarak dağıtılır.

space-around: Sağ ve solda boşluk kalacak şekilde öğeler kapsayıcı içerisinde eşit olarak dağıtılır.

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-content

flex-grow: Verilebilecek değerler: 0 | 1

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-grow

flex-shrink

Verilebilecek değerler: 0 | 1

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-shrink

flex-basis

Verilebilecek değerler: sayı | content

content: Varsayılan değere döner.

Örnek(ler) için aşağıdaki bağlantıyı inceleyebilirsiniz.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-basis