Флекс
Челтәр баганаларының макетын, тигезләнешен, зурлыгын тиз арада идарә итегез, навигация, компонентлар һәм башкалар. Катлаулырак тормышка ашыру өчен, махсус CSS кирәк булырга мөмкин.
Флекс тәртибен рөхсәт итегез
Флексбокс displayконтейнеры ясау һәм балаларның туры элементларын флекс әйберләренә әверелдерү өчен коммуналь хезмәтләрне кулланыгыз. Флекс контейнерлар һәм әйберләр өстәмә флекс үзлекләре белән алга таба үзгәртелә ала.
<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-flexForаваплы вариацияләр дә бар .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
Ectionнәлеш
Флекс әйберләрнең юнәлешен флекс контейнерга урнаштырыгыз. Күпчелек очракта сез монда горизонталь классны калдыра аласыз, браузерның килешүе 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>Forаваплы вариацияләр дә бар 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, төп күчәрдә флекс әйберләренең тигезләнешен үзгәртү өчен (башлау өчен х күчәре, у күчәре булса flex-direction: column). ( Браузерның килешү буенча start) end,,,, яки .centerbetweenaroundevenly
<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>
Forаваплы вариацияләр дә бар 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, кросс күчәрендәге флекс әйберләрнең тигезләнешен үзгәртү өчен (баштан ук күчәре, х күчәре булса flex-direction: column). start,,,, Яки (браузерның килешү буенча end) сайлагыз center.baselinestretch
<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>
Forаваплы вариацияләр дә бар 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
Selfзеңне тигезлә
align-selfФлексбокс әйберләрендәге коммуналь хезмәтләрне кросс күчәрендә тигезләү өчен индивидуаль кулланыгыз (башлау өчен у күчәре, х күчәре булса ) flex-direction: column. Шул ук вариантлардан сайлагыз align-items: start,,,, яки ( браузер килешү) end.centerbaselinestretch
<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>
Forаваплы вариацияләр дә бар 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аларны горизонталь киңлекне алганда, аларның эчтәлегенә тигез булган киңлекләргә (яки аларның эчтәлеге чик сандыкларыннан артмаса).
<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>Forаваплы вариацияләр дә бар flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Owсегез һәм кысылыгыз
.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-growForаваплы вариацияләр дә бар 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 автомобиль кырлары белән кушылганда, Flexbox бик искиткеч әйберләр эшли ала. Түбәндә күрсәтелгән флекс әйберләрен автомобиль кырлары аша контрольдә тотуның өч мисалы: килешү (авто маржа юк), ике әйберне уңга ( .me-auto), һәм ике әйберне сулга этәрү ( .ms-auto).
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>Тигезләү әйберләре белән
Бер флекс әйберне контейнерның өске яисә аскы өлешенә күчереп күчерегез align-items, flex-direction: columnһәм .margin-top: automargin-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>
Forаваплы вариацияләр дә бар 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 дән 5кә кадәр бөтен санны алган кебек order, кирәкле өстәмә кыйммәтләр өчен махсус 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>Forаваплы вариацияләр дә бар 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класслар бар , orderэлементны кулланып үзгәртәләр .order: -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Флексбокс контейнерларында коммуналь хезмәтләрне кулланыгыз . ( Браузерның килешү буенча start) end,,,, яки . Бу коммуналь хезмәтләрне күрсәтү өчен, без флекс әйберләр санын арттырдык һәм арттырдык.centerbetweenaroundstretchflex-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>
Forаваплы вариацияләр дә бар 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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Медиа объект
Медиа объект компонентын Bootstrap 4- дән күчерергә телисезме? Элеккегә караганда тагын да сыгылучанлык һәм көйләү мөмкинлеге бирә торган берничә флекс ярдәме белән аны беркайчан да булдырмагыз.
<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>Рәсем янындагы эчтәлекне вертикальләштерергә телисез ди:
<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>Сасс
Коммуналь 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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),