Source

Flex

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

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

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

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

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

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

<div class="d-inline-flex p-2 bd-highlight">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 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-columnТик багытты коюу үчүн же .flex-column-reverseкарама-каршы тараптан вертикалдуу багытты баштоо үчүн колдонуңуз .

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

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

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

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

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

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>

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

Толтуруу

.flex-fillБардык жеткиликтүү горизонталдык мейкиндикти ээлеп, аларды мазмунуна барабар кеңдикке (же алардын мазмуну чек ара кутучаларынан ашпаса, бирдей тууралыкка) мажбурлоо үчүн классты бир тууган элементтердин сериясында колдонуңуз .

Көп мазмуну бар ийкемдүү нерсе

Flex нерсе

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

үчүн жооп берүүчү вариациялар да бар flex-fill.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill

Өсүү жана кичирейтүү

.flex-grow-*Жеткиликтүү мейкиндикти толтуруу үчүн ийкемдүү нерсенин өсүү жөндөмүн которуштуруу үчүн утилиталарды колдонуңуз . Төмөндөгү мисалда .flex-grow-1элементтер бардык жеткиликтүү мейкиндикти пайдаланат, ал эми калган эки ийкемдүү нерсеге керектүү мейкиндикти берет.

Flex нерсе

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

<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-*Керек болсо ийкемдүү нерсенин кичирейтүү мүмкүнчүлүгүн которуу үчүн утилиталарды колдонуңуз . Төмөнкү мисалда, менен экинчи ийкемдүү нерсе .flex-shrink-1анын мазмунун жаңы сапка ороого аргасыз болуп, мурунку ийкемдүү нерсеге көбүрөөк орун берүү үчүн "кичирейет" .w-100.

Flex нерсе

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

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

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

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

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

Flex нерсе

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

Flex нерсе

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

Ороо

Ийилүүчү нерселердин ийкемдүү идишке кантип оролорун өзгөртүңүз. Тагыраагы менен оробоо (серепчинин демейки) менен .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 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>

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