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

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 bölümde; bu temel özellikleri uygulamalı olarak  anlatmaya dördüncü  bölümde kaldığımız yerden devam ediyoruz.




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

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.