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

Чиглэл

Чиглэлийн хэрэгслүүдтэй уян хатан саванд уян хатан зүйлсийн чиглэлийг тохируулна уу. Ихэнх тохиолдолд хөтчийн анхдагч нь 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

Агуулгыг зөвтгөх

justify-contentҮндсэн тэнхлэг дээрх уян хатан зүйлсийн зэрэгцүүлэлтийг өөрчлөхийн тулд flexbox контейнер дээрх хэрэгслүүдийг ашиглана уу (эхлэх x тэнхлэг, хэрэв бол y тэнхлэг ) flex-direction: column. start(хөтчийн өгөгдмөл), end, center, between, эсвэл -ээс сонгоно уу 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>

-д зориулсан хариу урвал бас байдаг 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

Зүйлүүдийг тэгшлэх

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

Бөглөх

Классыг .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-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

Автомат захын зай

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

justify-contentХарамсалтай нь, IE10 болон IE11 нь үндсэн бус утгыг эцэг эх нь уян хатан зүйлсийн автомат маржинг зөв дэмждэггүй . Дэлгэрэнгүй мэдээллийг StackOverflow хариултаас үзнэ үү.

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

<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

Захиалга

Тодорхой уян хатан зүйлсийн харагдах дарааллыг цөөн хэдэн хэрэгслээр өөрчил 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

Агуулгыг тэгшлэх

Хөндлөн тэнхлэг дээр уян хатан зүйлсийг хооронд нь зэрэгцүүлэхийн тулд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-between
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-between
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-between
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-between
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-between
• .align-content-xl-around
• .align-content-xl-stretch