Flex
Toʻliq javob beruvchi flexbox yordam dasturlari toʻplami yordamida panjara ustunlari, navigatsiya, komponentlar va boshqalarning joylashuvi, hizalanishi va oʻlchamlarini tezda boshqaring. Keyinchalik murakkab ilovalar uchun maxsus CSS kerak bo'lishi mumkin.
Moslashuvchan xatti-harakatlarni yoqing
Flexbox displaykonteynerini yaratish va bevosita bolalar elementlarini moslashuvchan elementlarga aylantirish uchun yordamchi dasturlardan foydalaning. Flex konteynerlari va buyumlari qo'shimcha moslashuvchan xususiyatlar bilan yanada o'zgartirilishi mumkin.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div><div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>Javob beruvchi oʻzgarishlar va uchun ham .d-flexmavjud .d-inline-flex.
.d-flex.d-inline-flex.d-sm-flex.d-sm-inline-flex.d-md-flex.d-md-inline-flex.d-lg-flex.d-lg-inline-flex.d-xl-flex.d-xl-inline-flex.d-xxl-flex.d-xxl-inline-flex
Yo'nalish
Yo'nalish yordamchi dasturlari bilan egiluvchan konteynerda egiluvchan elementlarning yo'nalishini o'rnating. Ko'pgina hollarda siz gorizontal sinfni bu erda qoldirishingiz mumkin, chunki brauzer standarti row. Biroq, siz ushbu qiymatni aniq belgilashingiz kerak bo'lgan holatlarga duch kelishingiz mumkin (masalan, sezgir tartiblar).
.flex-rowGorizontal yo'nalishni o'rnatish (brauzerning sukut bo'yicha) yoki .flex-row-reversegorizontal yo'nalishni qarama-qarshi tomondan boshlash uchun foydalaning .
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>.flex-columnVertikal yo'nalishni o'rnatish yoki .flex-column-reverseqarama-qarshi tomondan vertikal yo'nalishni boshlash uchun foydalaning .
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>uchun javob beruvchi o'zgarishlar ham mavjud flex-direction.
.flex-row.flex-row-reverse.flex-column.flex-column-reverse.flex-sm-row.flex-sm-row-reverse.flex-sm-column.flex-sm-column-reverse.flex-md-row.flex-md-row-reverse.flex-md-column.flex-md-column-reverse.flex-lg-row.flex-lg-row-reverse.flex-lg-column.flex-lg-column-reverse.flex-xl-row.flex-xl-row-reverse.flex-xl-column.flex-xl-column-reverse.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
Tarkibni asoslang
Asosiy o'qdagi moslashuvchan elementlarning hizalanishini o'zgartirish uchun flexbox konteynerlarida yordamchi dasturlardan foydalaning justify-content(boshlash uchun x o'qi, y o'qi bo'lsa flex-direction: column). start(brauzer standarti), end, center, between, around, yoki dan tanlang evenly.
<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>
<div class="d-flex justify-content-evenly">...</div>
uchun javob beruvchi o'zgarishlar ham mavjud justify-content.
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
Elementlarni tekislang
align-itemsKo'ndalang o'qdagi moslashuvchan elementlarning hizalanishini o'zgartirish uchun flexbox konteynerlarida yordamchi dasturlardan foydalaning (boshlash uchun y o'qi, agar bo'lsa x o'qi flex-direction: column). start, end, center, baseline, yoki stretch(brauzer standarti) dan tanlang .
<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>
uchun javob beruvchi o'zgarishlar ham mavjud align-items.
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch.align-items-sm-start.align-items-sm-end.align-items-sm-center.align-items-sm-baseline.align-items-sm-stretch.align-items-md-start.align-items-md-end.align-items-md-center.align-items-md-baseline.align-items-md-stretch.align-items-lg-start.align-items-lg-end.align-items-lg-center.align-items-lg-baseline.align-items-lg-stretch.align-items-xl-start.align-items-xl-end.align-items-xl-center.align-items-xl-baseline.align-items-xl-stretch.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-stretch
O'zingizni tekislang
Flexbox align-selfelementlaridagi yordamchi dasturlardan ularning oʻzaro oʻq boʻyicha hizalanishini alohida oʻzgartirish uchun foydalaning (boshlash uchun y oʻqi, agar , x oʻqi flex-direction: column). Quyidagi kabi variantlardan tanlang align-items: start, end, center, baseline, yoki stretch(brauzer standarti).
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
uchun javob beruvchi o'zgarishlar ham mavjud align-self.
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch.align-self-sm-start.align-self-sm-end.align-self-sm-center.align-self-sm-baseline.align-self-sm-stretch.align-self-md-start.align-self-md-end.align-self-md-center.align-self-md-baseline.align-self-md-stretch.align-self-lg-start.align-self-lg-end.align-self-lg-center.align-self-lg-baseline.align-self-lg-stretch.align-self-xl-start.align-self-xl-end.align-self-xl-center.align-self-xl-baseline.align-self-xl-stretch.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-stretch
To'ldirish
.flex-fillBarcha mavjud gorizontal bo'shliqni egallab, ularni mazmuniga teng kengliklarga (yoki ularning tarkibi chegara qutilaridan oshmasa, teng kengliklarga) majburlash uchun bir qator birodar elementlarda sinfdan foydalaning .
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>uchun javob beruvchi o'zgarishlar ham mavjud flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
O'sish va qisqarish
Mavjud .flex-grow-*bo'sh joyni to'ldirish uchun moslashuvchan elementning o'sish qobiliyatini almashtirish uchun yordamchi dasturlardan foydalaning. Quyidagi misolda .flex-grow-1elementlar mavjud bo'lgan barcha bo'sh joydan foydalanadi, qolgan ikkita moslashuvchan elementga kerakli bo'sh joyni beradi.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>.flex-shrink-*Agar kerak bo'lsa, moslashuvchan elementning qisqarish qobiliyatini almashtirish uchun yordamchi dasturlardan foydalaning . Quyidagi misolda, bilan ikkinchi moslashuvchan element .flex-shrink-1o'z tarkibini yangi qatorga o'rashga majbur bo'lib, oldingi moslashuvchan element uchun ko'proq joy ajratish uchun "qisqarmoqda" .w-100.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>Javob beruvchi oʻzgarishlar va uchun ham flex-growmavjud flex-shrink.
.flex-{grow|shrink}-0.flex-{grow|shrink}-1.flex-sm-{grow|shrink}-0.flex-sm-{grow|shrink}-1.flex-md-{grow|shrink}-0.flex-md-{grow|shrink}-1.flex-lg-{grow|shrink}-0.flex-lg-{grow|shrink}-1.flex-xl-{grow|shrink}-0.flex-xl-{grow|shrink}-1.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
Avtomatik chekkalar
Moslashuvchan hizalamalarni avtomatik chekkalar bilan aralashtirishda Flexbox juda ajoyib ishlarni amalga oshirishi mumkin. Quyida egiluvchan elementlarni avtomatik chegaralar orqali boshqarishning uchta misoli ko'rsatilgan: standart (avtomatik cheklovsiz), ikkita elementni o'ngga .me-autosurish ( ) va ikkita elementni chapga surish ( .ms-auto).
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="me-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>Align-elementlar bilan
align-items, flex-direction: columnva margin-top: autoyoki ni aralashtirish orqali bitta egiluvchan elementni vertikal ravishda idishning yuqori yoki pastki qismiga o'tkazing margin-bottom: auto.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>O'rash
Egiluvchan elementlarning egiluvchan konteynerga qanday o'ralishini o'zgartiring. Hech qanday oʻrash yoʻq (birlamchi brauzer) bilan .flex-nowrap, bilan oʻrash .flex-wrapyoki teskari oʻrashdan tanlang .flex-wrap-reverse.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
uchun javob beruvchi o'zgarishlar ham mavjud flex-wrap.
.flex-nowrap.flex-wrap.flex-wrap-reverse.flex-sm-nowrap.flex-sm-wrap.flex-sm-wrap-reverse.flex-md-nowrap.flex-md-wrap.flex-md-wrap-reverse.flex-lg-nowrap.flex-lg-wrap.flex-lg-wrap-reverse.flex-xl-nowrap.flex-xl-wrap.flex-xl-wrap-reverse.flex-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
Buyurtma
Muayyan moslashuvchan elementlarning vizual tartibini bir nechta yordamchi dasturlar bilan o'zgartiring order. Biz faqat elementni birinchi yoki oxirgi qilish, shuningdek, DOM tartibidan foydalanish uchun qayta o'rnatish variantlarini taqdim etamiz. order0 dan 5 gacha bo'lgan har qanday tamsayı qiymatini olganidek, zarur bo'lgan qo'shimcha qiymatlar uchun maxsus CSS qo'shing .
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>uchun javob beruvchi o'zgarishlar ham mavjud order.
.order-0.order-1.order-2.order-3.order-4.order-5.order-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
Bundan tashqari , mos ravishda va qo'llash orqali elementni o'zgartiradigan sezgir .order-firstva sinflar ham mavjud..order-lastorderorder: -1order: 6
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
Tarkibni tekislang
Egiluvchan elementlarni o'zaro o'qda bir-biriga align-contenttekislash uchun flexbox konteynerlarida yordamchi dasturlardan foydalaning . (brauzer standarti), , , , , yoki dan tanlang . Ushbu yordamchi dasturlarni namoyish qilish uchun biz moslashuvchan elementlarning sonini oshirdik va kuchaytirdik.startendcenterbetweenaroundstretchflex-wrap: wrap
Oldindan qisqa ma'lumot berish! Bu xususiyat egiluvchan elementlarning bir qatoriga ta'sir qilmaydi.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
uchun javob beruvchi o'zgarishlar ham mavjud align-content.
.align-content-start.align-content-end.align-content-center.align-content-around.align-content-stretch.align-content-sm-start.align-content-sm-end.align-content-sm-center.align-content-sm-around.align-content-sm-stretch.align-content-md-start.align-content-md-end.align-content-md-center.align-content-md-around.align-content-md-stretch.align-content-lg-start.align-content-lg-end.align-content-lg-center.align-content-lg-around.align-content-lg-stretch.align-content-xl-start.align-content-xl-end.align-content-xl-center.align-content-xl-around.align-content-xl-stretch.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Media ob'ekti
Bootstrap 4 dan media ob'ekt komponentini takrorlashni xohlaysizmi? Avvalgidan ham ko'proq moslashuvchanlik va moslashtirish imkonini beruvchi bir nechta moslashuvchan yordamchi dasturlar yordamida uni qisqa vaqt ichida qayta yarating.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Tasvir yonidagi tarkibni vertikal markazlashtirishni xohlaysizmi deylik:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Sass
Utilities API
Flexbox yordam dasturlari bizning API-da e'lon qilingan scss/_utilities.scss. API yordam dasturlarini qanday ishlatishni bilib oling.
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),