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

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

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

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">
  <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">
  <div class="mr-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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-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" 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" 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 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">
  <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-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