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

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

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, 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

Imakunatapas chiqanchay

Flexbox align-itemswaqaychanakunapi yanapakuykunata llamk'achiy flex imaymanakuna chimpapuray eje kaqpi chiqanchayta tikranapaq (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

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

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

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

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 ( .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>

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

Ñ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 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

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 huklla filakuna flex imaymanakunapi ruwayniyuqchu.

<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-between
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-between
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-between
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-between
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-between
• .align-content-xl-around
• .align-content-xl-stretch