1. Flexbox nima?

Flexbox (Flexible Box) — elementlarni qator yoki ustunga joylashtirish uchun maxsus CSS tizimi. Oldin dasturchilar buning uchun float, inline-block va turli hiylalar ishlatar edi. Flexbox — bularning hammasini bitta komanda bilan hal qiladi.

Ishlatish juda oson: ota-elementga display: flex; qo'ying. Tamom — bolalari endi qator bo'yicha turadi.

1.ota {
2  display: flex;
3}

2. flex-direction — yo'nalish

• row — default, qator (chapdan o'ngga).
• row-reverse — teskari qator (o'ngdan chapga).
• column — ustun (yuqoridan pastga).
• column-reverse — teskari ustun.

1.ota {
2  display: flex;
3  flex-direction: column;
4}

3. justify-content — asosiy o'q bo'ylab joylashuv

Asosiy o'q (main axis) bo'yicha elementlarni qanday taqsimlashni belgilaydi. Agar flex-direction: row bo'lsa — gorizontal.

• flex-start — boshiga (default).
• flex-end — oxiriga.
• center — markazga.
• space-between — teng bo'shliq ichida.
• space-around — atroflariga ham bo'shliq.
• space-evenly — butunlay teng bo'shliq.

4. align-items — ko'ndalang o'q bo'ylab

Ko'ndalang o'qda (agar row bo'lsa — vertikal) elementlarni qanday joylashtirishni belgilaydi.

• stretch — default, to'liq cho'zadi.
• flex-start — yuqoriga.
• center — markazga.
• flex-end — pastga.
• baseline — matn chizig'i bo'yicha.

5. gap, flex-wrap va flex

gap — bo'shliq

Flex bolalari orasidagi bo'shliq. margin o'rniga bemalol shu ishlatiladi.

1.ota {
2  display: flex;
3  gap: 16px;           /* har ikki yo'nalishda */
4  /* yoki */
5  row-gap: 8px;
6  column-gap: 16px;
7}

flex-wrap — qatorga sig'masa

Default holda flex bolalari bir qatorga majburan siqiladi. flex-wrap: wrap qo'ysangiz — sig'magani yangi qatorga o'tadi.

1.ota {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 12px;
5}

flex: 1 — bola egallashi kerak bo'lgan joy

flex: 1 — bola bo'sh joyni to'lasicha oladi. Ikki bolaga flex: 1 bersangiz — teng bo'lib olishadi.

6. Haqiqiy misollar

Sayt navigatsiyasi

Kartalar tizimi