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

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

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, yoki dan tanlang around.

<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>

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-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

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

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

To'ldirish

.flex-fillBarcha mavjud gorizontal bo'shliqni egallab, ularni teng kengliklarga majburlash uchun bir qator qardosh elementlarda sinfdan foydalaning . Ayniqsa, teng kenglikdagi yoki asosli navigatsiya uchun foydalidir.

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</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

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'zining 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

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 .mr-autosurish ( ) va ikkita elementni chapga surish ( .ml-auto).

Afsuski, IE10 va IE11 ota-onasi standart bo'lmagan justify-contentqiymatga ega bo'lgan moslashuvchan elementlarda avtomatik chekkalarni to'g'ri qo'llab-quvvatlamaydi. Qo'shimcha ma'lumot olish uchun ushbu StackOverflow javobiga qarang.

<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="mr-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="ml-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

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. Har orderqanday tamsayı qiymatini (masalan, 5) olganidek, kerakli 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-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

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