Flex
Толук жооп берүүчү flexbox утилиталары менен тор мамычаларынын, навигациянын, компоненттердин жана башкалардын макетін, тегиздөөсүн жана өлчөмүн тез башкарыңыз. Татаал ишке ашыруу үчүн, ыңгайлаштырылган CSS керек болушу мүмкүн.
Ийкемдүү жүрүм-турумду иштетүү
Flexbox displayконтейнерин түзүү үчүн утилиталарды колдонуңуз жана түз балдар элементтерин ийкемдүү элементтерге айландырыңыз. Flex контейнерлер жана буюмдар кошумча ийкемдүү касиеттери менен андан ары өзгөртүлүшү мүмкүн.
<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>Жооптуу вариациялар жана үчүн да .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.d-xxl-flex.d-xxl-inline-flex
Багыт
Багыт утилитасы бар ийкемдүү контейнерде ийкемдүү нерселердин багытын коюңуз. Көпчүлүк учурларда сиз бул жерде горизонталдык классты калтырсаңыз болот, анткени браузердин демейки row. Бирок, сиз бул маанини так коюу керек болгон кырдаалдарга туш болушуңуз мүмкүн (мисалы, жооп берүүчү макеттер).
.flex-rowГоризонталдык багытты коюу үчүн (браузерде демейки) же .flex-row-reverseкарама-каршы тараптан горизонталдуу багытты баштоо үчүн колдонуңуз .
<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карама-каршы тараптан вертикалдуу багытты баштоо үчүн колдонуңуз .
<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.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
Мазмунду негиздөө
Негизги огу боюнча ийкемдүү нерселердин тегиздөөсүн өзгөртүү үчүн flexbox контейнерлериндеги утилиталарды колдонуңуз justify-content(баштоо үчүн x огу, эгерде y огу болсо flex-direction: column). start(браузердин демейки), end, center, between, around, же арасынан тандаңыз 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>
үчүн жооп берүүчү вариациялар да бар 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
Элементтерди тегиздөө
Кайчылаш огу боюнча ийкемдүү нерселердин тегиздөөсүн өзгөртүү үчүн flexbox контейнерлериндеги утилиталарды колдонуңуз align-items(баштоо үчүн y огу, эгер болсо x огу flex-direction: column). start, end, center, baseline, же stretch(браузердин демейки) ичинен тандаңыз .
<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.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-stretch
Өзүңүздү тегиздөө
Flexbox элементтериндеги утилиталарды кайчылаш огу боюнча тегиздөөсүн жекече өзгөртүү үчүн колдонуңуз align-self(баштоо үчүн y огу, эгер болсо x огу flex-direction: column). Ошол эле опциялардан тандаңыз align-items: start, end, center, baseline, же stretch(браузердин демейки).
<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.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-stretch
Толтуруу
.flex-fillБардык жеткиликтүү горизонталдык мейкиндикти ээлеп жатып, аларды мазмунуна барабар кеңдикке (же алардын мазмуну чек ара кутучаларынан ашпаса, бирдей кеңдикке) мажбурлоо үчүн классты бир тууган элементтердин сериясында колдонуңуз .
<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-xxl-fill
Өсүү жана кичирейтүү
.flex-grow-*Жеткиликтүү мейкиндикти толтуруу үчүн ийкемдүү нерсенин өсүү жөндөмүн которуштуруу үчүн утилиталарды колдонуңуз . Төмөндөгү мисалда .flex-grow-1элементтер бардык жеткиликтүү мейкиндикти пайдаланат, ал эми калган эки ийкемдүү нерсеге керектүү мейкиндикти берет.
<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.
<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.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
Автоматтык чектер
Flexbox сиз ийкемдүү тегиздөөлөрдү авто маржалар менен аралаштырганда абдан сонун нерселерди жасай алат. Төмөндө автоматтык чектер аркылуу ийкемдүү нерселерди башкаруунун үч мисалы көрсөтүлгөн: демейки (автоматтык маржа жок), эки нерсени оңго .me-autoтүртүү ( ) жана эки нерсени солго түртүү ( .ms-auto).
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>Тегиздөө пункттары менен
align-items, flex-direction: columnжана margin-top: autoже аралаштыруу аркылуу бир ийкемдүү нерсени тигинен контейнердин үстүнө же түбүнө жылдырыңыз 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>Ороо
Ийилүүчү нерселердин ийкемдүү идишке кантип оролорун өзгөртүңүз. Тагыраагы менен оробоо (серепчинин демейки) менен .flex-nowrap, менен ороп .flex-wrapже тескери ороону тандаңыз .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>
үчүн жооп берүүчү вариациялар да бар 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
Заказ
Белгилүү ийкемдүү нерселердин визуалдык тартибин бир нече orderутилиталар менен өзгөртүңүз . Биз бир гана нерсени биринчи же акыркы кылуу, ошондой эле DOM тартибин колдонуу үчүн баштапкы абалга келтирүү опцияларын беребиз. 0дөн order5ке чейинки бүтүн сандын маанисин алганда, керектүү кошумча маанилер үчүн ыңгайлаштырылган 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-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
Андан тышкары , тиешелүүлүгүнө жараша жана колдонуу менен элементтин өзгөрүшүнө жооп берүүчү .order-firstжана класстар бар ..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
Мазмунду тегиздөө
Flexbox контейнерлериндеги утилиталарды кайчылаш огу боюнча align-contentийкемдүү элементтерди тегиздөө үчүн колдонуңуз . start(браузердин демейки), end, center, between, around, же арасынан тандаңыз stretch. Бул коммуналдык кызматтарды көрсөтүү үчүн биз flex-wrap: wrapийкемдүү нерселердин санын күчөттүк жана көбөйттүк.
Көңүл бургула! Бул касиет ийкемдүү элементтердин бир катарларына эч кандай таасир этпейт.
<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>
үчүн жооп берүүчү вариациялар да бар 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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Медиа объект
Bootstrap 4тен медиа объектинин компонентин репликациялоону издеп жатасызбы? Мурдагыдан да көбүрөөк ийкемдүүлүккө жана ыңгайлаштырууга мүмкүндүк берген бир нече ийкемдүү утилиталар менен аны эч убакта кайра түзүңүз.
<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>Сүрөттүн жанындагы мазмунду вертикалдуу ортого салгыңыз келет деп айтыңыз:
<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 утилиталары биздин API-де жарыяланган scss/_utilities.scss. API утилиталарын кантип колдонууну үйрөнүңүз.
"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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),