Flex
Тарҳ, ҳамоҳангсозӣ ва андозаи сутунҳои шабакавӣ, паймоиш, ҷузъҳо ва ғайраро бо маҷмӯи пурраи утилитаҳои flexbox ҷавобгӯ зуд идора кунед. Барои татбиқи мураккабтар, CSS фармоишӣ метавонад лозим бошад.
Утилитаҳоро display
барои сохтани контейнери флексбокс истифода баред ва унсурҳои бевоситаи кӯдаконаро ба ҷузъҳои флекс табдил диҳед. Контейнерҳо ва ашёҳои Flex метавонанд бо хосиятҳои иловагии чандир тағйир дода шаванд.
Вариантҳои ҷавобӣ низ барои .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
Утилитаҳоро align-self
дар ҷузъҳои flexbox барои ба таври инфиродӣ тағир додани ҳамоҳангии онҳо дар меҳвари салиб истифода баред (меҳвари 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
).
Мутаассифона, IE10 ва IE11 маржаҳои худкорро дар ҷузъҳои фасеҳ, ки волидайнашон justify-content
арзиши ғайримуқаррарӣ доранд, дуруст дастгирӣ намекунанд. Барои тафсилоти бештар ба ин ҷавоби 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