Source

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.

Soy un contenedor flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Soy un contenedor flexbox en línea!
<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.

Flex nisqa item 1
Flex nisqa item 2
Flex nisqa item 3
Flex nisqa item 1
Flex nisqa item 2
Flex nisqa item 3
<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.

Flex nisqa item 1
Flex nisqa item 2
Flex nisqa item 3
Flex nisqa item 1
Flex nisqa item 2
Flex nisqa item 3
<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.

Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<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 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 .

Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<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).

Flex elemento
Artículo flex alineado
Flex elemento
Flex elemento
Artículo flex alineado
Flex elemento
Flex elemento
Artículo flex alineado
Flex elemento
Flex elemento
Artículo flex alineado
Flex elemento
Flex elemento
Artículo flex alineado
Flex elemento
<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

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.

Flex elemento
Flex elemento
Flex elemento
<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

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.

Flex elemento
Flex elemento
Kimsa kaq flex item
<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.

Flex elemento
Flex elemento
<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.

Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<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.

Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<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.

Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<div class="d-flex flex-nowrap">
  ...
</div>
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<div class="d-flex flex-wrap">
  ...
</div>
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<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.

Ñawpaq kaq flex elemento
Iskay kaq flex elemento
Kimsa kaq flex item
<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 huk ruwayniyuqchu sapalla filakuna flex imakuna kaqpi.

Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<div class="d-flex align-content-end flex-wrap">...</div>
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<div class="d-flex align-content-center flex-wrap">...</div>
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<div class="d-flex align-content-between flex-wrap">...</div>
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<div class="d-flex align-content-around flex-wrap">...</div>
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
Flex elemento
<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