Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish

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.

Men flexbox konteynerman!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Men inline flexbox konteynerman!
<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 .

Moslashuvchan element 1
Moslashuvchan element 2
Moslashuvchan element 3
Moslashuvchan element 1
Moslashuvchan element 2
Moslashuvchan element 3
<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 .

Moslashuvchan element 1
Moslashuvchan element 2
Moslashuvchan element 3
Moslashuvchan element 1
Moslashuvchan element 2
Moslashuvchan element 3
<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.

Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<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 .

Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<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).

Egiluvchan element
Tegishli moslashuvchan element
Egiluvchan element
Egiluvchan element
Tegishli moslashuvchan element
Egiluvchan element
Egiluvchan element
Tegishli moslashuvchan element
Egiluvchan element
Egiluvchan element
Tegishli moslashuvchan element
Egiluvchan element
Egiluvchan element
Tegishli moslashuvchan element
Egiluvchan element
<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 .

Ko'p tarkibga ega moslashuvchan element
Egiluvchan element
Egiluvchan element
<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.

Egiluvchan element
Egiluvchan element
Uchinchi moslashuvchan element
<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.

Egiluvchan element
Egiluvchan element
<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).

Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<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.

Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<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.

Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<div class="d-flex flex-nowrap">
  ...
</div>
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<div class="d-flex flex-wrap">
  ...
</div>
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<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 .

Birinchi moslashuvchan element
Ikkinchi moslashuvchan element
Uchinchi moslashuvchan element
<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.

Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<div class="d-flex align-content-end flex-wrap">...</div>
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<div class="d-flex align-content-center flex-wrap">...</div>
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<div class="d-flex align-content-between flex-wrap">...</div>
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<div class="d-flex align-content-around flex-wrap">...</div>
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
Egiluvchan element
<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.

Placeholder Image
Bu media komponentidan ba'zi kontent. Buni istalgan tarkib bilan almashtirishingiz va kerak bo'lganda sozlashingiz mumkin.
<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:

Placeholder Image
Bu media komponentidan ba'zi kontent. Buni istalgan tarkib bilan almashtirishingiz va kerak bo'lganda sozlashingiz mumkin.
<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,
      ),
    ),