Flex

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">I'm a flexbox container!</div>

<div class="d-inline-flex p-2">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 mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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 mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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ʻqi boʻyicha hizalanishini individual ravishda oʻzgartirish uchun foydalaning (boshlash uchun y oʻqi, agar boʻlsa 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 mazmuni chegara qutilaridan oshmasa, teng kengliklarga) majburlash uchun bir qator birodar elementlarda sinfdan foydalaning .

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">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">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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 chegaralar 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 mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">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 mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

O'rash

Egiluvchan elementlarning moslashuvchan 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">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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-between
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-between
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-between
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-between
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-between
• .align-content-xl-around
• .align-content-xl-stretch
• .align-content-xxl-start
• .align-content-xxl-end
• .align-content-xxl-center
• .align-content-xxl-between
• .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
    ),
    "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,
      ),
    ),