Source

Flex

Сүлжээний багана, навигаци, бүрэлдэхүүн хэсэг болон бусад зүйлсийн зохион байгуулалт, зэрэгцүүлэлт, хэмжээсийг бүрэн хариу үйлдэл үзүүлэх flexbox хэрэгслүүдийн тусламжтайгаар хурдан удирдаарай. Илүү төвөгтэй хэрэгжилтийн хувьд захиалгат CSS шаардлагатай байж болно.

Уян хатан зан үйлийг идэвхжүүлэх

Флексбокс 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

Flex зүйл 2

Уян хатан зүйл 3

Уян хатан зүйл 1

Flex зүйл 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

Flex зүйл 2

Уян хатан зүйл 3

Уян хатан зүйл 1

Flex зүйл 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

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

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

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

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

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

Уян хатан зүйл

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

Уян хатан зүйл

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

Уян хатан зүйл

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

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

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