in English

Flex

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

Энэ хуудсан дээр

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

Флексбокс displayсав үүсгэж, шууд хүүхдийн элементүүдийг уян хатан зүйл болгон хувиргах хэрэгслүүдийг ашиглана уу. Flex сав болон эд зүйлсийг нэмэлт уян хатан шинж чанараар өөрчлөх боломжтой.

Би flexbox сав байна!

html

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

Би бол inline flexbox контейнер!

html

<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
.d-xxl-flex
.d-xxl-inline-flex

Чиглэл

Чиглэлийн хэрэгслүүдтэй уян хатан саванд уян хатан зүйлсийн чиглэлийг тохируулна уу. Ихэнх тохиолдолд хөтчийн анхдагч нь row. Гэсэн хэдий ч, та энэ утгыг тодорхой тохируулах шаардлагатай нөхцөл байдалтай тулгарч магадгүй (хариуцагч байрлал гэх мэт).

.flex-rowХэвтээ чиглэлийг тохируулах (хөтчийн өгөгдмөл) эсвэл .flex-row-reverseэсрэг талаас хэвтээ чиглэлийг эхлүүлэхийн тулд ашиглана уу .

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

Flex зүйл 2

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

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

Flex зүйл 2

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

html

<div class="d-flex flex-row mb-3">
  <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

html

<div class="d-flex flex-column mb-3">
  <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
.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хэд хэдэн дүүгийн элементүүд дээр ашиглахын тулд тэдгээрийг агуулгатай нь тэнцүү (эсвэл агуулга нь тэдгээрийн хүрээний хайрцгаас хэтрээгүй бол ижил өргөнтэй) болгон хүчлэхийн зэрэгцээ бүх хэвтээ зайг эзэлнэ.

Маш их агуулга бүхий уян хатан зүйл

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

html

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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элементүүд нь боломжтой бүх зайг ашигладаг бол үлдсэн хоёр уян хатан зүйлд шаардлагатай зайг олгодог.

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

Гурав дахь уян хатан зүйл

html

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Шаардлагатай .flex-shrink-*бол уян хатан зүйлийн агших чадварыг өөрчлөхийн тулд хэрэгслүүдийг ашиглана уу. Доорх жишээнд хоёр дахь уян хатан зүйл нь .flex-shrink-1агуулгыг нь шинэ мөрөнд боож, өмнөх уян хатан зүйлд илүү зай гаргахын тулд "багасгаж" байна .w-100.

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

html

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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).

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

html

<div class="d-flex mb-3">
  <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 mb-3">
  <div class="me-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 mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Зэрэгцүүлэх зүйлстэй

Нэг уян хатан зүйлийг босоо байдлаар савны дээд эсвэл доод хэсэгт align-items, flex-direction: column, болон margin-top: autoэсвэл хольж зөөнө margin-bottom: auto.

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

html

<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Захиалга

Тодорхой уян хатан зүйлсийн харагдах дарааллыг цөөн хэдэн orderхэрэгслүүдээр өөрчил . Бид зөвхөн эхний эсвэл сүүлчийн зүйлийг хийх, мөн DOM захиалгыг ашиглахын тулд дахин тохируулах сонголтыг өгдөг. 0-ээс 5 хүртэлх бүхэл тоон утгыг авдаг тул orderшаардлагатай нэмэлт утгуудад тусгай CSS-г нэмнэ үү.

Эхний уян хатан зүйл

Хоёрдахь уян хатан зүйл

Гурав дахь уян хатан зүйл

html

<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-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-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
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

Медиа объект

Bootstrap 4-ээс медиа объектын бүрэлдэхүүн хэсгийг хуулбарлахыг хайж байна уу? Өмнөхөөсөө илүү уян хатан байдал, тохируулах боломжийг олгодог хэд хэдэн уян хатан хэрэгслээр үүнийг богино хугацаанд дахин бүтээгээрэй.

Энэ бол медиа бүрэлдэхүүн хэсгийн зарим агуулга юм. Та үүнийг дурын контентоор сольж, шаардлагатай бол тохируулж болно.

html

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

Зургийн хажууд агуулгыг босоо байдлаар голлуулахыг хүсч байгаагаа хэлээрэй:

html

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