flexbox.png-Uygulamalı Flexbox Temelleri-cahitsoyman.blogspot.com
Bu makalede Flexbox'un temel özelliklerini uygulamalı örneklerle görsel olarak anlatmaya çalışacağım.

Flexbox veya Esnek Kutu Düzeni CSS3'te karmaşık uygulamaları ve web sayfalarını düzenlemek için tasarlanmış yeni bir düzen modudur.

Flexbox; yapıya esneklik verdiği için, yatay ve dikey hizalamalar da öğelerin kendi içinde hizalanmalarını ve sırasını belirlemek için kolaylık sağlamaktadır.

Dolayısıyla; flexbox yapısı altında hem container (kapsayıcı) için hem de içinde ki items (öğeler) için bir çok flexbox temel özelliği bulunmaktadır.  


İşte; bu temel özelliklerini uygulamalı olarak  anlatmaya çalışacağım.


Bitmiş uygulamalı örneklerimiz şu şekilde olacaktır:

1. Örneğimizde; bir navigasyon örneğinin flexbox'la aldığı çeşitli değerler gösterilmektedir.

2. Örneğimizde; 2 satırlık bir form oluşturup, boyutlarını flexbox'la uzatıyoruz.

3. Örneğimizde;  3 sutunlu bir düzende sütunların çeşitli şekillerde yerleşimi gösterilmektedir.

4. Örneğimizde; 3 farklı özelliğe sahip kutuların aldığı değerlere göre oluşum şekilleri gösterilmektedir.

5. Örnekte; eşit ölçülerde oluşturulan kutuların flexbox özellikleri ile sayfaya yerleştirilmeleri gösterilmektedir.

6. Örnekte; bir texti bir banner içinde flexbox'la yatay ve dikey şekilde ortalaması gösterilmektedir.

7. ve Son Örnekte; bir kapsayıcı div içinde eşit yüksekliklerde ki sütunların dikey olarak yerleşmesi gösterilmektedir.

Kaynak Kodları: İNDİR

Bundan sonra ki anlatımı, aşağıdaki videodan veya youtube kanalımdan takip edebilirsiniz.