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.
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
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
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, utaq 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>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-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
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
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
Utilizar la .flex-fillclase en una serie de elementos hermanos para obligarlos a igual anchos mientras tomar el espacio horizontal disponible. Aswan allinmi kaqlla anchoyuq, utaq chaninchasqa, purinapaq.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item</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
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 ejemplopi, iskay kaq flex item kaqwan .flex-shrink-1obligasqa kachkan chayta musuq chiruman p'istuykunanpaq, “encogimiento” aswan espaciota ñawpaq flex elementopaq saqinanpaq .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
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 ( .mr-auto), iskay elementokunata pañaman tanqay ( .ml-auto).
Llakikuypaq, IE10 chaymanta IE11 mana allintachu yanapanku auto margenkunata flex kaqkunapi mayqinkunachus tayta mamanku mana ñawpaqmanta churasqa justify-contentchaninniyuq kanku. Aswan sut'inchaykunapaq kay StackOverflow kutichiyta qhaway.
<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>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>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
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 hapin (kayhina, 5), yapay sapanchasqa CSS 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-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
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