Flex
Сүлжээний багана, навигаци, бүрэлдэхүүн хэсэг болон бусад зүйлсийн зохион байгуулалт, зэрэгцүүлэлт, хэмжээсийг бүрэн хариу үйлдэл үзүүлэх flexbox хэрэгслүүдийн тусламжтайгаар хурдан удирдаарай. Илүү төвөгтэй хэрэгжилтийн хувьд захиалгат CSS шаардлагатай байж болно.
Уян хатан зан үйлийг идэвхжүүлэх
Флексбокс 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
Агуулгыг зөвтгөх
justify-contentҮндсэн тэнхлэг дээрх уян хатан зүйлсийн зэрэгцүүлэлтийг өөрчлөхийн тулд flexbox контейнер дээрх хэрэгслүүдийг ашиглана уу (эхлэх 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
Зүйлүүдийг тэгшлэх
align-itemsХөндлөн тэнхлэг дээрх уян хатан зүйлсийн зэрэгцүүлэлтийг өөрчлөхийн тулд flexbox контейнер дээрх хэрэгслүүдийг ашиглана уу (эхлэх 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
Өөрийгөө тэгшлэх
align-selfХөндлөн тэнхлэг дээрх (эхлэх у тэнхлэг, хэрэв бол x тэнхлэг) зэрэгцүүлэлтийг тус тусад нь өөрчлөхийн тулд flexbox зүйлсийн хэрэгслүүдийг ашиглана уу 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-ээс 5 хүртэлх бүхэл тоон утгыг авдаг тул orderшаардлагатай нэмэлт утгуудад тусгай 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-lastангиуд байдаг бөгөөд тус тусад orderнь элементийг өөрчилдөг.order: -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
Агуулгыг тэгшлэх
Хөндлөн тэнхлэг дээр уян хатан зүйлсийг хооронд нь зэрэгцүүлэхийн тулдalign-content flexbox контейнер дээрх хэрэгслүүдийг ашиглана уу. (хөтчийн өгөгдмөл), , , , , эсвэл -ээс сонгоно уу . Эдгээр хэрэгслүүдийг харуулахын тулд бид уян хатан зүйлсийн тоог хэрэгжүүлж, нэмэгдүүлсэн.startendcenterbetweenaroundstretchflex-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>Сасс
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,
),
),