in English

Flex

Толук flexbox утилиталарынын толук топтому менен тор мамычаларынын, навигациянын, компоненттердин жана башкалардын макетін, тегиздөөсүн жана өлчөмүн тез башкарыңыз. Татаал ишке ашыруу үчүн, ыңгайлаштырылган CSS керек болушу мүмкүн.

Бул бетте

Ийкемдүү жүрүм-турумду иштетүү

Flexbox 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 ийкемдүү нерсе

2 ийкемдүү нерсе

3 ийкемдүү нерсе

1 ийкемдүү нерсе

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 ийкемдүү нерсе

2 ийкемдүү нерсе

3 ийкемдүү нерсе

1 ийкемдүү нерсе

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

Мазмунду негиздөө

Негизги огу боюнча ийкемдүү нерселердин тегиздөөсүн өзгөртүү үчүн flexbox контейнерлериндеги утилиталарды колдонуңуз justify-content(баштоо үчүн x огу, эгерде y огу болсо flex-direction: column). start(браузердин демейки), end, center, between, around, же арасынан тандаңыз evenly.

Flex нерсе

<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(браузердин демейки) ичинен тандаңыз .

Flex нерсе

<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(браузердин демейки).

Flex нерсе

Тегизделген ийкемдүү нерсе

Flex нерсе

Тегизделген ийкемдүү нерсе

Flex нерсе

Тегизделген ийкемдүү нерсе

Flex нерсе

Тегизделген ийкемдүү нерсе

Flex нерсе

Тегизделген ийкемдүү нерсе

Flex нерсе

<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Бардык жеткиликтүү горизонталдык мейкиндикти ээлеп жатып, аларды мазмунуна барабар кеңдикке (же алардын мазмуну чек ара кутучаларынан ашпаса, бирдей кеңдикке) мажбурлоо үчүн классты бир тууган элементтердин сериясында колдонуңуз .

Көп мазмуну бар ийкемдүү нерсе

Flex нерсе

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элементтер бардык жеткиликтүү мейкиндикти пайдаланат, ал эми калган эки ийкемдүү нерсеге керектүү мейкиндикти берет.

Flex нерсе

Үчүнчү ийкемдүү нерсе

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.

Flex нерсе

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

Flex нерсе

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.

Flex нерсе

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.

Flex нерсе

<div class="d-flex flex-nowrap">
  ...
</div>

Flex нерсе

<div class="d-flex flex-wrap">
  ...
</div>

Flex нерсе

<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 кошуңуз.

Биринчи ийкемдүү нерсе

Экинчи ийкемдүү нерсе

Үчүнчү ийкемдүү нерсе

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-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ийкемдүү нерселердин санын күчөттүк жана көбөйттүк.

Көңүл бургула! Бул касиет ийкемдүү элементтердин бир катарларына эч кандай таасир этпейт.

Flex нерсе

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Flex нерсе

<div class="d-flex align-content-end flex-wrap">...</div>

Flex нерсе

<div class="d-flex align-content-center flex-wrap">...</div>

Flex нерсе

<div class="d-flex align-content-between flex-wrap">...</div>

Flex нерсе

<div class="d-flex align-content-around flex-wrap">...</div>

Flex нерсе

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

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