BS5 Flex
Flexbox
Bootstrap 3 bilan Bootstrap 4 va 5 o‘rtasidagi eng katta farq shundaki, endi Bootstrap 5 maketni boshqarish uchun float’lar o‘rniga flexbox’dan foydalanadi.
Flexible Box Layout moduli float yoki joylashtirish (positioning) xususiyatlaridan foydalanmasdan moslashuvchan maket tuzilmasini loyihalashni osonlashtiradi. Agar flex bilan endi tanishayotgan bo‘lsangiz, bu haqda CSS Flexbox darsligimizda o‘qishingiz mumkin.
Eslatma: Flexbox IE9 va undan oldingi versiyalarda qo‘llab-quvvatlanmaydi.
Agar sizga IE8-9 qo‘llab-quvvatlashi kerak bo‘lsa, Bootstrap 3’dan foydalaning. Bu Bootstrap’ning eng barqaror versiyasi bo‘lib, hanuz jamoa tomonidan jiddiy xatolarni tuzatish va hujjatlarni yangilash doirasida qo‘llab-quvvatlanadi. Biroq unga yangi imkoniyatlar qo‘shilmaydi.
Flexbox konteyner yaratish va uning bevosita farzand elementlarini flex elementlarga aylantirish uchun d-flex klassidan foydalaning:
Misol
Misol
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
O‘zingiz sinab ko‘ring »Inline flexbox konteyner yaratish uchun d-inline-flex klassidan foydalaning:
Misol
Misol
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
O‘zingiz sinab ko‘ring »Gorizontal yo‘nalish
Flex elementlarni gorizontal (yonma-yon) joylashtirish uchun .flex-row dan foydalaning. Bu standart holat.
Maslahat: Gorizontal yo‘nalishni o‘ngga tekislash uchun .flex-row-reverse dan foydalaning:
Misol
Misol
<div class="d-flex flex-row bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
O‘zingiz sinab ko‘ring »Vertikal yo‘nalish
Flex elementlarni vertikal (bir-birining ustida) joylashtirish uchun .flex-column dan, vertikal yo‘nalishni teskari qilish uchun esa .flex-column-reverse dan foydalaning:
Misol
Misol
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
O‘zingiz sinab ko‘ring »Justify content (gorizontal tekislash)
Flex elementlarning tekislanishini o‘zgartirish uchun .justify-content-* klasslaridan foydalaning. Yaroqli klasslar: start (standart), end, center, between yoki around:
Misol
Misol
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
O‘zingiz sinab ko‘ring »To‘ldirish / teng kengliklar
Flex elementlarni teng kenglikka majburlash uchun ularga .flex-fill ni qo‘llang:
Misol
Misol
<div class="d-flex">
<div class="p-2 bg-info flex-fill">Flex item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
O‘zingiz sinab ko‘ring »Grow (kattalashish)
Flex element qolgan bo‘sh joyni egallashi uchun unga .flex-grow-1 ni qo‘llang. Quyidagi misolda dastlabki ikkita flex element o‘ziga kerakli joyni egallaydi, oxirgi element esa qolgan barcha bo‘sh joyni egallaydi:
Misol
Misol
<div class="d-flex">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
O‘zingiz sinab ko‘ring »Maslahat: Flex element kerak bo‘lganda kichrayishi uchun unga .flex-shrink-1 ni qo‘llang.
Tartib (order)
Muayyan flex element(lar)ning vizual tartibini .order klasslari yordamida o‘zgartiring. Yaroqli klasslar 0 dan 5 gacha; eng kichik son eng yuqori ustuvorlikka ega (order-1 order-2 dan oldin ko‘rsatiladi va h.k.):
Misol
Misol
<div class="d-flex bg-secondary">
<div class="p-2 bg-info order-3">Flex item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
O‘zingiz sinab ko‘ring »Avtomatik tashqi chekinishlar (auto margin)
Flex elementlarga .ms-auto (elementlarni o‘ngga suradi) yoki .me-auto (elementlarni chapga suradi) yordamida osongina avtomatik tashqi chekinish (auto margin) qo‘shing:
Misol
Misol
<div class="d-flex bg-secondary">
<div class="p-2 ms-auto bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 me-auto bg-primary">Flex item 3</div>
</div>
O‘zingiz sinab ko‘ring »O‘rash (wrap)
Flex konteynerdagi flex elementlar qanday o‘ralishini (keyingi qatorga o‘tishini) .flex-nowrap (standart), .flex-wrap yoki .flex-wrap-reverse yordamida boshqaring.
Misol oynasidagi flex elementlarning o‘ralishini o‘zgartirib, uchta klass o‘rtasidagi farqni ko‘rish uchun quyidagi tugmalarni bosing:
Misol
Misol
<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>
O‘zingiz sinab ko‘ring »Align content (vertikal tekislash)
Yig‘ilgan flex elementlarning vertikal tekislanishini .align-content-* klasslari yordamida boshqaring. Yaroqli klasslar: .align-content-start (standart), .align-content-end, .align-content-center, .align-content-between, .align-content-around va .align-content-stretch.
Eslatma: Bu klasslar bitta qatordan iborat flex elementlarga ta’sir qilmaydi.
Misol
Misol
<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>
O‘zingiz sinab ko‘ring »Align items (elementlarni tekislash)
Flex elementlardan iborat bitta qatorlarning vertikal tekislanishini .align-items-* klasslari yordamida boshqaring. Yaroqli klasslar: .align-items-start, .align-items-end, .align-items-center, .align-items-baseline va .align-items-stretch (standart).
Beshta klass o‘rtasidagi farqni ko‘rish uchun quyidagi tugmalarni bosing:
Misol
Misol
<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>
O‘zingiz sinab ko‘ring »Align self (alohida elementni tekislash)
Muayyan flex elementning vertikal tekislanishini .align-self-* klasslari yordamida boshqaring. Yaroqli klasslar: .align-self-start, .align-self-end, .align-self-center, .align-self-baseline va .align-self-stretch (standart).
Beshta klass o‘rtasidagi farqni ko‘rish uchun quyidagi tugmalarni bosing:
Misol
Misol
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
O‘zingiz sinab ko‘ring »Moslashuvchan flex klasslari
Barcha flex klasslari qo‘shimcha moslashuvchan klasslarga ega bo‘lib, ular muayyan ekran o‘lchamida muayyan flex klassini belgilashni osonlashtiradi.
* belgisini sm, md, lg, xl yoki xxl bilan almashtirish mumkin; ular mos ravishda small, medium, large, xlarge va xxlarge ekranlarni bildiradi.
| Klass | Tavsif | Misol |
|---|---|---|
| Flex konteyner | ||
.d-*-flex |
Turli ekranlar uchun flexbox konteyner yaratadi | Sinab ko‘ring |
.d-*-inline-flex |
Turli ekranlar uchun inline flexbox konteyner yaratadi | Sinab ko‘ring |
| Yo‘nalish | ||
.flex-*-row |
Turli ekranlarda flex elementlarni gorizontal joylashtiradi | Sinab ko‘ring |
.flex-*-row-reverse |
Turli ekranlarda flex elementlarni gorizontal va o‘ngga tekislangan holda joylashtiradi | Sinab ko‘ring |
.flex-*-column |
Turli ekranlarda flex elementlarni vertikal joylashtiradi | Sinab ko‘ring |
.flex-*-column-reverse |
Turli ekranlarda flex elementlarni vertikal va teskari tartibda joylashtiradi | Sinab ko‘ring |
| Justify content (gorizontal tekislash) | ||
.justify-content-*-start |
Turli ekranlarda flex elementlarni boshidan (chapga tekislangan holda) joylashtiradi | Sinab ko‘ring |
.justify-content-*-end |
Turli ekranlarda flex elementlarni oxiriga (o‘ngga tekislangan holda) joylashtiradi | Sinab ko‘ring |
.justify-content-*-center |
Turli ekranlarda flex elementlarni flex konteynerning markazida joylashtiradi | Sinab ko‘ring |
.justify-content-*-between |
Turli ekranlarda flex elementlarni "between" usulida (oralaridagi bo‘sh joyni teng taqsimlab) joylashtiradi | Sinab ko‘ring |
.justify-content-*-around |
Turli ekranlarda flex elementlarni "around" usulida (atrofidagi bo‘sh joyni teng taqsimlab) joylashtiradi | Sinab ko‘ring |
| To‘ldirish / teng kenglik | ||
.flex-*-fill |
Turli ekranlarda flex elementlarni teng kenglikka majburlaydi | Sinab ko‘ring |
| Grow (kattalashish) | ||
.flex-*-grow-0 |
Turli ekranlarda elementlarning kattalashishiga yo‘l qo‘ymaydi | |
.flex-*-grow-1 |
Turli ekranlarda elementlarni kattalashtiradi | |
| Shrink (kichrayish) | ||
.flex-*-shrink-0 |
Turli ekranlarda elementlarning kichrayishiga yo‘l qo‘ymaydi | |
.flex-*-shrink-1 |
Turli ekranlarda elementlarni kichraytiradi | |
| Tartib (order) | ||
.order-*-0-12 |
Kichik ekranlarda tartibni 0 dan 5 gacha o‘zgartiradi | Sinab ko‘ring |
| O‘rash (wrap) | ||
.flex-*-nowrap |
Turli ekranlarda elementlarni o‘ramaydi (keyingi qatorga o‘tkazmaydi) | Sinab ko‘ring |
.flex-*-wrap |
Turli ekranlarda elementlarni o‘raydi (keyingi qatorga o‘tkazadi) | Sinab ko‘ring |
.flex-*-wrap-reverse |
Turli ekranlarda elementlarning o‘ralishini teskari qiladi | Sinab ko‘ring |
| Align content (vertikal tekislash) | ||
.align-content-*-start |
Turli ekranlarda yig‘ilgan elementlarni boshidan tekislaydi | Sinab ko‘ring |
.align-content-*-end |
Turli ekranlarda yig‘ilgan elementlarni oxirida tekislaydi | Sinab ko‘ring |
.align-content-*-center |
Turli ekranlarda yig‘ilgan elementlarni markazda tekislaydi | Sinab ko‘ring |
.align-content-*-around |
Turli ekranlarda yig‘ilgan elementlarni "around" usulida tekislaydi | Sinab ko‘ring |
.align-content-*-stretch |
Turli ekranlarda yig‘ilgan elementlarni cho‘zadi | Sinab ko‘ring |
| Align items (elementlarni tekislash) | ||
.align-items-*-start |
Turli ekranlarda bitta qatordagi elementlarni boshidan tekislaydi | Sinab ko‘ring |
.align-items-*-end |
Turli ekranlarda bitta qatordagi elementlarni oxirida tekislaydi | Sinab ko‘ring |
.align-items-*-center |
Turli ekranlarda bitta qatordagi elementlarni markazda tekislaydi | Sinab ko‘ring |
.align-items-*-baseline |
Turli ekranlarda bitta qatordagi elementlarni tayanch chiziq (baseline) bo‘yicha tekislaydi | Sinab ko‘ring |
.align-items-*-stretch |
Turli ekranlarda bitta qatordagi elementlarni cho‘zadi | Sinab ko‘ring |
| Align self (alohida elementni tekislash) | ||
.align-self-*-start |
Turli ekranlarda flex elementni boshidan tekislaydi | Sinab ko‘ring |
.align-self-*-end |
Turli ekranlarda flex elementni oxirida tekislaydi | Sinab ko‘ring |
.align-self-*-center |
Turli ekranlarda flex elementni markazda tekislaydi | Sinab ko‘ring |
.align-self-*-baseline |
Turli ekranlarda flex elementni tayanch chiziq (baseline) bo‘yicha tekislaydi | Sinab ko‘ring |
.align-self-*-stretch |
Turli ekranlarda flex elementni cho‘zadi | Sinab ko‘ring |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!