CSS Flexbox Temel Kılavuzu

CSS Flexbox Nedir ve Nasıl Kullanılır?

CSS Flexbox, CSS3‘te bir düzendir. Flexbox, bir web sayfasında duyarlı düzenler ve bileşenler oluşturmak için kullanılır. Sayfayı duyarlı bir şekilde tasarlayabilmeniz için iyi bir seçimdir. İşte flexbox’a başlamak için temel bir kılavuz.

Yukarıdaki resme bakın ve bir konteynır var ve bunun içine iki eleman yerleştirilmiş. Bu düzen anlaşılması gereken önemli bir kısımdır. Şimdi bu konteynır’ı bir xy ekseni koordinatına çizin, flexbox’taki yatay kısım Ana eksen (main axis) ve dikey kısım Çapraz eksen (Cross axis) olarak adlandırılır.

Flexbox’ı kullanma

Flexbox’ı kullanmak için kullanacağınız elemanın kapsayıcısına display: flex; özelliğini tanımlayın.

Flex-direction Kullanımı ve Özellikleri

Elemana yön vermek için kullanılan Flex-direction özelliği kullanılır. Bunun dört tipi vardır;

• flex-direction: row; esnek öğeleri yatay sıraya yerleştirin.
• flex-direction: row-reverse; esnek öğeleri sıraya ama ters sırada yerleştirin.
• flex-direction: column; esnek öğeleri sütuna (dikey) yerleştirin.
• flex-direction: column-reverse; esnek öğeleri sütuna ancak ters sırada yerleştirin.

Aşağıdaki örnekte görebilirsiniz.

Flex-wrap Kullanımı ve Özellikleri

• flex-wrap : nowrap esnek öğeyi esnek kapta sarmaz.
• flex-wrap : wrap kap boyutuna sığmazsa esnek öğeyi esnek kap içine saracaktır.

Aşağıdaki örnekte görebilirsiniz.

Felxbox Hizalama Kullanımı ve Özellikleri

Flexbox’un en önemli ve düzenli olarak kullanacağınız özelliklerinden birisi olan justify-content (Ana eksene yatay olarak) ve align-items (Çapraz eksene (dikey olarak) özelliklerini inceleyeceğiz.

Ana eksenle birlikte içeriği yaslama (Yatay olarak)

• justify-content: flex-start esnek öğeyi esnek kabın başlangıcına yerleştirir (yukarıdaki ilk resme bakın)
• justify-content: flex-end esnek öğeyi esnek kabın sonuna yerleştirecek
• justify-content: center esnek öğeleri ortalamak için.
• justify-content: space-around öğenin etrafında boşluk bırakın.
• justify-content: space-between arasındaki tüm çerçeve ve boşluk öğesini kullanır.
• justify-content: space-evenly tüm öğeleri eşit olarak yerleştirin

İçeriği Çapraz eksenle (dikey olarak) hizalama.

justify-content ile aynı özelliklere sahiptir.

• align-items: flex-start esnek öğeyi esnek kabın başlangıcına yerleştirir 
• align-items: flex-end esnek öğeyi esnek kapların sonuna yerleştirecek
• align-items: center esnek öğeleri ortalamak için.
• align-items: baseline esnek öğeyi temel öğeye yerleştirin.

Bu yazı tamamen başlangıç niteliğindedir. Konunun ince ayrıntıları hakkında tam bilgi sahibi olmak için lütfen buradaki adresi ziyaret edin!