CSS flexbox

Css dəki flexbox elementləri horizontal və ya vertical sıralamağa kömək edən modern css layoutlarından biridir.

Niyə Flexbox?

1. Flexbox istifadə edərək yaratdığımız saytı responsive etmək daha asandır.

2. Flex quruluşu daha asandır

3. Günümüzdə bütün Browserlər tərəfindən dəstəklənir

Flexboxun İstifadə qaydası:

Flexboxda 2 əsas element vardır . İlki Container digəri isə İtemlər- elementlərdir.

Display

Display: flex təyin etməklə biz bu qutunu əsnək etmiş oluruq.

Flex direction

Flex direction itemlərin hansı formada (horizontal yada vertikal) düzüləcəyini təyin etmək üçün işlədilir və containerə tətbiq edilir

• row (default): soldan sağa standart düzülüş
• row-reverse:sağdan sola doğru düzülüş
• column: təpədən aşağıya doğru düzülüş
• column-reverse: aşağıdan təpəyə doğru düzülüş üçün istifadə edilir.

Flex-wrap

Flex-wrap elementləri sıra ilə düzdüyümüz zaman alt sətirə keçib keçməməsi üçün işlədilir. (containerə tətbiq edilir)

3 növü var

• nowrap (default): Bütün elementlər 1 sırada
• wrap: flex elementləri bir neçə sıra şəklində düzülür.
• wrap-reverse: flex elementləri bir neçə sıra şəklində əks istiqamətdə düzülür.

Justify-content

justify-content elementləri hansı forma ilə düzməyimizə kömək edir. (Containerə tətbiq edilir).

Align-items

Bu bizə elementlərin çarpaz istiqamət boyunca fərqli şəkillərdə sıralandığını göstərmək üçün işlədilir.(containerə tətbiq edilir)