Flex

Жауап беретін flexbox утилиталарының толық жиынтығымен тор бағандарының орналасуын, туралануын және өлшемдерін, шарлауды, құрамдастарды және т.б. жылдам басқарыңыз. Күрделі іске асыру үшін реттелетін CSS қажет болуы мүмкін.

Бұл бетте

Икемді әрекеттерді қосыңыз

displayFlexbox контейнерін жасау және тікелей еншілес элементтерді икемді элементтерге түрлендіру үшін утилиталарды қолданыңыз . Икемді контейнерлер мен элементтерді қосымша икемді қасиеттермен әрі қарай өзгертуге болады.

Мен flexbox контейнермін!

html

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

Мен кірістірілген флексбокс контейнерімін!

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

Мазмұнды негіздеу

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

Өзіңізді туралаңыз

Flexbox align-selfэлементтеріндегі қызметтік бағдарламаларды олардың көлденең осі бойынша туралауын жеке өзгерту үшін пайдаланыңыз (басталатын y осі, егер болса x осі flex-direction: column). , align-items, , , немесе (шолғыштың әдепкі параметрі) сияқты опциялардан таңдаңыз .startendcenterbaselinestretch

Икемді элемент

Тураланған икемді элемент

Икемді элемент

Тураланған икемді элемент

Икемді элемент

Тураланған икемді элемент

Икемді элемент

Тураланған икемді элемент

Икемді элемент

Тураланған икемді элемент

Икемді элемент

<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 тәртібін пайдалану үшін қалпына келтіру опцияларын ұсынамыз. order0-ден 5-ке дейінгі кез келген бүтін мәнді қабылдайтындықтан, қажет кез келген қосымша мәндер үшін реттелетін 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сыныптар бар .orderorder: -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,
      ),
    ),