Bir paytlar sahifa maketini float va jadvallar bilan “yig‘ish”ga to‘g‘ri kelardi. Bugun bizda ikkita kuchli vosita bor: Flexbox va CSS Grid. Ikkalasi ham barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi, ammo ular turli vazifalar uchun yaratilgan.
Asosiy farq: bir o‘lchov va ikki o‘lchov
Flexbox elementlarni bitta yo‘nalishda — qator yoki ustun bo‘ylab — joylashtiradi. Grid esa qator va ustunlarni bir vaqtda boshqaradi. Oddiy qoida: elementlar bir chiziqda tursa — Flexbox, jadvalga o‘xshash maket kerak bo‘lsa — Grid.
Flexbox qachon qulay?
- Navigatsiya menyusi va tugmalar qatori.
- Elementlarni vertikal va gorizontal markazlashtirish.
- Kontent miqdoriga qarab kengayadigan komponentlar.
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}Grid qachon qulay?
- Sahifaning umumiy maketi: header, sidebar, kontent, footer.
- Kartalar galereyasi.
- Elementlar aniq qator va ustunlarga tekislanishi kerak bo‘lganda.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 24px;
}Yuqoridagi bitta qator kod hech qanday media so‘rovsiz moslashuvchan galereya yaratadi: ekran kengligiga qarab ustunlar soni o‘zi o‘zgaradi.
Ikkalasini birga ishlatish
Amalda eng yaxshi natija kombinatsiyada: sahifa maketi Grid’da, uning ichidagi kartalar va tugmalar esa Flexbox’da quriladi. Ular bir-birini almashtirmaydi, balki to‘ldiradi.
| Vazifa | Tavsiya |
|---|---|
| Menyu, toolbar | Flexbox |
| Kartalar galereyasi | Grid |
| Sahifa maketi | Grid |
| Markazlashtirish | Ikkalasi ham |
Avval kontentni o‘ylang, keyin vositani tanlang: chiziqmi yoki to‘rmi?
