Flex
Жауап беретін flexbox утилиталарының толық жиынтығымен тор бағандарының орналасуын, туралануын және өлшемдерін, шарлауды, құрамдастарды және т.б. жылдам басқарыңыз. Күрделі іске асыру үшін реттелетін CSS қажет болуы мүмкін.
Икемді әрекеттерді қосыңыз
display
Flexbox контейнерін жасау және тікелей еншілес элементтерді икемді элементтерге түрлендіру үшін утилиталарды қолданыңыз . Икемді контейнерлер мен элементтерді қосымша икемді қасиеттермен әрі қарай өзгертуге болады.
<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
Өзіңізді туралаңыз
Flexbox align-self
элементтеріндегі қызметтік бағдарламаларды олардың көлденең ось бойынша туралауын жеке өзгерту үшін пайдаланыңыз (басталатын y осі, егер болса x осі 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 контейнерлеріндегі утилиталарды пайдаланыңыз . (шолғыш әдепкі), , , , , немесе таңдаңыз . Бұл утилиталарды көрсету үшін біз икемді элементтердің санын күшейттік және көбейттік.start
end
center
between
around
stretch
flex-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