Flex
Жауап беретін flexbox утилиталарының толық жиынтығымен тор бағандарының орналасуын, туралануын және өлшемдерін, шарлауды, құрамдастарды және т.б. жылдам басқарыңыз. Күрделі іске асыру үшін реттелетін CSS қажет болуы мүмкін.
Икемді әрекеттерді қосыңыз
display
Flexbox контейнерін жасау және тікелей еншілес элементтерді икемді элементтерге түрлендіру үшін утилиталарды қолданыңыз . Икемді контейнерлер мен элементтерді қосымша икемді қасиеттермен әрі қарай өзгертуге болады.
Жауап беретін нұсқалар және үшін де .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
бағытты қарама-қарсы жақтан бастау үшін пайдаланыңыз.
Тік .flex-column
бағытты орнату немесе .flex-column-reverse
тік бағытты қарама-қарсы жақтан бастау үшін пайдаланыңыз.
үшін жауап беретін нұсқалар да бар 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
.
үшін жауап беретін нұсқалар да бар 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
(шолғыш әдепкі) ішінен таңдаңыз .
үшін жауап беретін нұсқалар да бар 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
үшін жауап беретін нұсқалар да бар 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
Барлық қол жетімді көлденең кеңістікті алып жатқанда, олардың мазмұнына тең ендерге (немесе олардың мазмұны олардың шекаралық ұяшықтарынан асып кетпесе, бірдей ендерге) мәжбүрлеу үшін сыныпты біріктірілген элементтер қатарында пайдаланыңыз .
үшін жауап беретін нұсқалар да бар flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
Өсу және кішірейту
.flex-grow-*
Қол жетімді орынды толтыру үшін икемді элементтің өсу мүмкіндігін ауыстыру үшін утилиталарды пайдаланыңыз . Төмендегі мысалда .flex-grow-1
элементтер барлық қол жетімді кеңістікті пайдаланады, ал қалған екі икемді элементке қажетті кеңістікке рұқсат береді.
.flex-shrink-*
Қажет болса, икемді элементтің кішірейту мүмкіндігін ауыстыру үшін утилиталарды пайдаланыңыз . Төмендегі мысалда бар екінші икемді элемент .flex-shrink-1
оның мазмұнын жаңа жолға орап, алдыңғы икемді элементке көбірек орын беру үшін "кішірейді" .w-100
.
Жауап беретін нұсқалар және үшін де 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 жауабын қараңыз.
туралау элементтерімен
align-items
, flex-direction: column
және margin-top: auto
немесе араластыру арқылы бір икемді элементті контейнердің жоғарғы немесе төменгі жағына тігінен жылжытыңыз margin-bottom: auto
.
Орау
Иілгіш элементтердің икемді контейнерге оралу жолын өзгертіңіз. -мен мүлде ораусыз (шолғыштың әдепкі параметрі), -мен .flex-nowrap
орау .flex-wrap
немесе -мен кері орамды таңдаңыз .flex-wrap-reverse
.
үшін жауап беретін нұсқалар да бар 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 қосыңыз.
үшін жауап беретін нұсқалар да бар 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
Ескерту! Бұл сипат икемді элементтердің бір қатарларына әсер етпейді.
үшін жауап беретін нұсқалар да бар 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