Flex

Толук жооп берүүчү flexbox утилиталары менен тор мамычаларынын, навигациянын, компоненттердин жана башкалардын макетін, тегиздөөсүн жана өлчөмүн тез башкарыңыз. Татаал ишке ашыруу үчүн, ыңгайлаштырылган CSS керек болушу мүмкүн.

Ийкемдүү жүрүм-турумду иштетүү

Flexbox displayконтейнерин түзүү үчүн утилиталарды колдонуңуз жана түз балдар элементтерин ийкемдүү элементтерге айландырыңыз. Flex контейнерлер жана буюмдар кошумча ийкемдүү касиеттери менен андан ары өзгөртүлүшү мүмкүн.

Мен flexbox контейнермин!

<div class="d-flex p-2">I'm a flexbox container!</div>

Мен Inline Flexbox контейнермин!

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Жооптуу вариациялар жана үчүн да .d-flexбар .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

Багыт

Багыт утилитасы бар ийкемдүү контейнерде ийкемдүү нерселердин багытын коюңуз. Көпчүлүк учурларда сиз бул жерде горизонталдык классты калтырсаңыз болот, анткени браузердин демейки row. Бирок, сиз бул маанини так коюу керек болгон кырдаалдарга туш болушуңуз мүмкүн (мисалы, жооп берүүчү макеттер).

.flex-rowГоризонталдык багытты коюу үчүн (браузерде демейки) же .flex-row-reverseкарама-каршы тараптан горизонталдуу багытты баштоо үчүн колдонуңуз .

1 ийкемдүү нерсе

2 ийкемдүү нерсе

3 ийкемдүү нерсе

1 ийкемдүү нерсе

2 ийкемдүү нерсе

3 ийкемдүү нерсе

<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-columnТик багытты коюу үчүн же .flex-column-reverseкарама-каршы тараптан вертикалдуу багытты баштоо үчүн колдонуңуз .

1 ийкемдүү нерсе

2 ийкемдүү нерсе

3 ийкемдүү нерсе

1 ийкемдүү нерсе

2 ийкемдүү нерсе

3 ийкемдүү нерсе

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

үчүн жооп берүүчү вариациялар да бар 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

Мазмунду негиздөө

Негизги огу боюнча ийкемдүү нерселердин тегиздөөсүн өзгөртүү үчүн flexbox контейнерлериндеги утилиталарды колдонуңуз justify-content(баштоо үчүн x огу, эгерде y огу болсо flex-direction: column). start(браузердин демейки), end, center, between, же арасынан тандаңыз around.

Flex нерсе

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

үчүн жооп берүүчү вариациялар да бар 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

Элементтерди тегиздөө

Кайчылаш огу боюнча ийкемдүү нерселердин тегиздөөсүн өзгөртүү үчүн flexbox контейнерлериндеги утилиталарды колдонуңуз align-items(баштоо үчүн y огу, эгер болсо x огу flex-direction: column). start, end, center, baseline, же stretch(браузердин демейки) ичинен тандаңыз .

Flex нерсе

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

үчүн жооп берүүчү вариациялар да бар 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

Өзүңүздү тегиздөө

Flexbox элементтериндеги утилиталарды кайчылаш огу боюнча тегиздөөсүн жекече өзгөртүү үчүн колдонуңуз align-self(баштоо үчүн y огу, эгер болсо x огу flex-direction: column). Ошол эле опциялардан тандаңыз align-items: start, end, center, baseline, же stretch(браузердин демейки).

Flex нерсе

Тегизделген ийкемдүү нерсе

Flex нерсе

Тегизделген ийкемдүү нерсе

Flex нерсе

Тегизделген ийкемдүү нерсе

Flex нерсе

Тегизделген ийкемдүү нерсе

Flex нерсе

Тегизделген ийкемдүү нерсе

Flex нерсе

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

үчүн жооп берүүчү вариациялар да бар 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

Автоматтык чектер

Flexbox сиз ийкемдүү тегиздөөлөрдү авто маржалар менен аралаштырганда абдан сонун нерселерди жасай алат. Төмөндө автоматтык чектер аркылуу ийкемдүү нерселерди башкаруунун үч мисалы көрсөтүлгөн: демейки (автоматтык маржа жок), эки нерсени оңго .mr-autoтүртүү ( ) жана эки нерсени солго түртүү ( .ml-auto).

Тилекке каршы, IE10 жана IE11 ата-энеси демейки эмес мааниге ээ болгон ийкемдүү элементтердин автомаржаларын туура колдобойт justify-content. Көбүрөөк маалымат алуу үчүн бул StackOverflow жообун караңыз.

Flex нерсе

<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-items, flex-direction: columnжана margin-top: autoже аралаштыруу аркылуу бир ийкемдүү нерсени тигинен контейнердин үстүнө же түбүнө жылдырыңыз margin-bottom: auto.

Flex нерсе

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

Ороо

Ийилүүчү нерселердин ийкемдүү идишке кантип оролорун өзгөртүңүз. Тагыраагы менен оробоо (серепчинин демейки) менен .flex-nowrap, менен ороп .flex-wrapже тескери ороону тандаңыз .flex-wrap-reverse.

Flex нерсе

<div class="d-flex flex-nowrap">
  ...
</div>

Flex нерсе

<div class="d-flex flex-wrap">
  ...
</div>

Flex нерсе

<div class="d-flex flex-wrap-reverse">
  ...
</div>

үчүн жооп берүүчү вариациялар да бар 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

Заказ

Белгилүү ийкемдүү нерселердин визуалдык тартибин бир нече orderутилиталар менен өзгөртүңүз . Биз бир гана нерсени биринчи же акыркы кылуу, ошондой эле DOM тартибин колдонуу үчүн баштапкы абалга келтирүү опцияларын беребиз. Ар orderкандай бүтүн санды алганда (мисалы, 5), керектүү кошумча маанилер үчүн ыңгайлаштырылган CSS кошуңуз.

Биринчи ийкемдүү нерсе

Экинчи ийкемдүү нерсе

Үчүнчү ийкемдүү нерсе

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

үчүн жооп берүүчү вариациялар да бар 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

Мазмунду тегиздөө

Flexbox контейнерлериндеги утилиталарды кайчылаш огу боюнча align-contentийкемдүү элементтерди тегиздөө үчүн колдонуңуз . start(браузердин демейки), end, center, between, around, же арасынан тандаңыз stretch. Бул коммуналдык кызматтарды көрсөтүү үчүн биз flex-wrap: wrapийкемдүү нерселердин санын күчөттүк жана көбөйттүк.

Көңүл бургула! Бул касиет ийкемдүү элементтердин бир катарларына эч кандай таасир этпейт.

Flex нерсе

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Flex нерсе

<div class="d-flex align-content-end flex-wrap">...</div>

Flex нерсе

<div class="d-flex align-content-center flex-wrap">...</div>

Flex нерсе

<div class="d-flex align-content-between flex-wrap">...</div>

Flex нерсе

<div class="d-flex align-content-around flex-wrap">...</div>

Flex нерсе

<div class="d-flex align-content-stretch flex-wrap">...</div>

үчүн жооп берүүчү вариациялар да бар 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