Flexible
Utqaylla kamachiy churayta, chiqanchayta chaymanta sayayninta rejilla columnakuna, puriy, componentekuna chaymanta aswan huk hunt'asqa suite kutichiq flexbox yanapakuykunawan. Aswan sasa ruwanakuna ruwanapaq, sapanchasqa CSS necesario kanman.
Flex ruwaykunata atichiy
displayHuk flexbox waqaychana ruwanapaq yanapakuykunata churay chaymanta chiqan wawakuna elementokunata flex kaqkunaman tikray. Flex waqaychanakuna chaymanta imakuna aswan tikrayta atikunku yapasqa flex propiedades kaqwan.
<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>Variaciones respuestas también existen para .d-flexy .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
Kamachiy
Flex nisqa imakunap direccionninta huk flex contenedor nisqapi churay utilidades de dirección nisqawan. Yaqa llapanpi kaypi horizontal claseta saqiyta atinki imaynachus maskaqpa ñawpaqmanta churasqa row. Ichaqa, situacionkunawan tinkinkiman maypi kay chanita sut'imanta churayta necesitarqanki (kutichiq churanakuna hina).
.flex-rowHuk sayaq ñanta churanapaq llamk'achiy (navegadorpa ñawpaqmanta churasqa), utaq .flex-row-reversechimpa ladumanta sayaq ñanta qallariypaq.
<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>Sayaq .flex-columnñanta churanapaq, utaq .flex-column-reversechimpa ladumanta sayaq ñanta qallarinapaq.
<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>Variaciones respuestas también existen para 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
Contenidota chaninchay
Flexbox justify-contentwaqaychanakunapi yanapakuykunata llamk'achiy, hatun eje kaqpi flex imakuna chiqanchayta tikranaykipaq (eje x qallariypaq, y-eje sichus flex-direction: column). Akllay start(navegadorpa ñawpaqmanta churasqa), end, center, between, around, utaq 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>
Variaciones respuestas también existen para 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
Imakunatapas chiqanchay
Flexbox align-itemswaqaychanakunapi yanapakuykunata llamk'achiy flex imakuna chimpapuray eje kaqpi chiqanchayta tikranaykipaq (y-eje qallariypaq, x-eje sichus flex-direction: column). start, end, center, baseline, utaq stretch(navegadorpa ñawpaqmanta churasqa) nisqamanta akllay .
<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>
Variaciones respuestas también existen para 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
Alinear kikiyki
Flexbox align-selfkaqkunapi yanapakuykunata llamk'achiy sapankama chimpapuray eje kaqpi chiqanchayninkuta tikranapaq (y-eje qallariypaq, x-eje sichus flex-direction: column). Akllay kikin akllanakunamanta align-items: start, end, center, baseline, utaq stretch(navegadorpa ñawpaqmanta churasqa).
<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>
Variaciones respuestas también existen para 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
Huntay
Claseta .flex-fillhuk serie wawqi elementokuna kaqpi llamk'achiy paykunata kallpachaypaq anchokunaman kaqlla contenidonkumanta (utaq kaqlla anchokunaman sichus contenidonku mana border-boxesninkuta atipanchu) chaymanta tukuy espacio horizontal kaqta hap'ispa.
<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>Variaciones respuestas también existen para flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Wiñay hinaspa pisiyay
Utilidades llamk'achiy .flex-grow-*huk flex elemento wiñananpaq atiyninta tikraypaq tiyana espaciota hunt'ananpaq. Uraypi kaq ejemplopi, .flex-grow-1elementokuna tukuy espacio kaqta atisqanmanhina llamk'achin, chaymanta puchuq iskay flex elementokunaman necesario espacionkuta saqin.
<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>Utilidades llamk'achiy .flex-shrink-*huk flex itempa atiyninta pisiyachiypaq sichus necesario kanman. Uraypi kaq ejemplopi, iskay kaq flex elemento con .flex-shrink-1obligasqa kachkan musuq chiruman contenidonta p’istuykunanpaq, “encogimiento” aswan espaciota saqinanpaq ñawpaq flex item con .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>Variaciones respuestas también existen para flex-growy 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
Auto margenes nisqa
Flexbox wakin sumaq manchay ruwaykunata ruwayta atin mayk'aq flex alineaciones auto margenes kaqwan chaqrunki. Uraypi rikuchisqa kimsa ejemplokuna flex elementokunata auto margenkuna kaqninta kamachinapaq: ñawpaqmanta (mana auto margenniyuq), iskay elementokunata pañaman tanqay ( .me-auto), iskay elementokunata pañaman tanqay ( .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>Con alinear-elementos
Huk llañuyasqa kaqtaqa sayaqmanta huk waqaychanapa hawanman utaq urayman kuyuchiy , align-items, flex-direction: columnicha margin-top: autochaqruspa 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>Matiy
Flex nisqa imakuna flex nisqa waqaychanapi imayna p’istuykusqanta tikray. Mana ima p'istuymanta akllay (navegadorpa ñawpaqmanta churasqa) ,wan .flex-nowrapp'istuymanta .flex-wrap, ichataq kutichiy p'istuymanta .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>
Variaciones respuestas también existen para 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
Ñiqinchay
Huk makilla utilidadkunawan específico flex elementokuna rikuy ordenta tikray . orderAkllanakunallata quyku huk elemento ñawpaq utaq qhipa ruwanapaq, chaymanta huk kutichiy DOM kamachiyta llamk'achinapaq. Imaynachus ordermayqin hunt'asqa yupay chanitapas 0 kaqmanta 5 kaqkama hapin, sapanchasqa CSS yapay ima yapasqa chanikuna necesitasqapaq.
<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>Variaciones respuestas también existen para 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
Adicionalmente hay también responsivos .order-firsty .order-lastclases que cambian el orderde un elemento aplicando order: -1y order: 6, respectivamente.
.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
Contenido nisqakunata chiqanchay
Flexbox align-contentwaqaychanakunapi yanapakuykunata llamk'achiy flex imaymanakunata chakana eje kaqpi hukllanapaq . Akllay start(navegadorpa ñawpaqmanta churasqa), end, center, between, around, utaq stretch. Kay yanapakuykunata rikuchinapaq, flex-wrap: wrapflex imakuna yupayta kallpachasqayku chaymanta yapasqayku.
¡Umakuna wichayman! Kay propiedad mana huk ruwayniyuqchu sapalla filakuna flex imakuna kaqpi.
<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>
Variaciones respuestas también existen para 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
Objeto de medios de comunicación
Bootstrap 4 kaqmanta willaynikuna objeto componente kaqmanta ruwayta maskachkankichu? Wakmanta ruway mana pachallapi huk pisi flex utilidadkunawan chaymanta aswan flexibilidad chaymanta personalización ñawpaqmanta saqin.
<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>Hinaspa niy, siq'ipa waqtanpi kaq contenidota verticalmente chawpichayta munanki:
<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>Sass
API de Utilidades nisqa
Flexbox yanapakuykuna yanapakuyniyku API kaqpi willasqa kachkanku scss/_utilities.scss. Yachay imayna ruwanakuna API llamk'achiyta.
"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,
),
),