Source

Pyso

Emohenda pyaꞌe umi columna cuadrícula rehegua ñemohenda, alineación ha tuichakue, jeguata, componente ha hetave mbaꞌe peteĩ suite henyhẽva flexbox utilidad ombohováiva reheve. Umi implementación ikomplikadovévape g̃uarã, ikatu oñeikotevẽ CSS jeporupyre.

Emboguata umi tekoha flex rehegua

Eipuru displayumi utilidad emoheñói hag̃ua peteĩ mbaꞌeryru flexbox ha emoambue umi elemento mitãnguéra directo rehegua umi mbaꞌe flex-pe. Umi mba’yru ha umi mba’e flex rehegua ikatu oñemoambueve umi propiedad flex rehegua adicional reheve.

Che ha'e peteĩ mba'yru flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Che ha'e peteĩ mba'yru flexbox en línea!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Oĩ avei umi variación ombohováiva .d-flexha .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

Ogarenda

Emohenda umi elemento flex dirección peteĩ mba’yru flex-pe orekóva utilidad dirección rehegua. Hetavéramo ikatu emboyke mbo’esyry horizontal ko’ápe kundahára por defecto ha’égui row. Ha katu, ikatu rejuhu situación tekotevẽhápe remohenda hesakã porãme ko mba’ekuaarã (ha’eháicha umi diseño ombohováiva).

Eipuru .flex-rowemohenda hag̃ua peteĩ dirección horizontal (kundahára por defecto), térã .flex-row-reverseemoñepyrũ hag̃ua dirección horizontal lado opuesto guive.

Flex artículo 1 rehegua
Flex artículo 2 rehegua
Flex artículo 3 rehegua
Flex artículo 1 rehegua
Flex artículo 2 rehegua
Flex artículo 3 rehegua
<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>

Eipuru .flex-columnemohenda hagua petet dirección vertical, téra .flex-column-reverseeñepyrü hagua dirección vertical lado opuesto guive.

Flex artículo 1 rehegua
Flex artículo 2 rehegua
Flex artículo 3 rehegua
Flex artículo 1 rehegua
Flex artículo 2 rehegua
Flex artículo 3 rehegua
<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>

Oĩ avei umi variación ombohováiva 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

Ohustifika contenido rehegua

Eipuru justify-contentumi utilidad umi mbaꞌeryru flexbox rehegua emoambue hag̃ua alineación umi mbaꞌe flex rehegua eje principal-pe (eje x oñepyrũ hag̃ua, eje y oiméramo flex-direction: column). Eiporavo start(navegador por defecto), end, center, between, térã around.

Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<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>

Oĩ avei umi variación ombohováiva 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

Emohenda umi mba’e

Eipuru align-itemsumi utilidad umi mbaꞌeryru flexbox rehegua emoambue hag̃ua alineación umi mbaꞌe flex rehegua eje kurusu rehegua (eje y oñepyrũ hag̃ua, eje x oiméramo flex-direction: column). Eiporavo start, end, center, baseline, térã stretch(navegador por defecto) apytégui.

Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<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>

Oĩ avei umi variación ombohováiva 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

Alinea auto rehegua

Eipuru align-selfutilidad umi mbaꞌe flexbox rehegua emoambue hag̃ua peteĩteĩva iñemohenda eje kurusu rehe (eje y oñepyrũ hag̃ua, eje x oiméramo flex-direction: column). Eiporavo umi opción peteĩchagua apytégui align-items: start, end, center, baseline, térã stretch(navegador por defecto).

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

Oĩ avei umi variación ombohováiva 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

Myanyhẽ

Eipuru pe .flex-fillclase petet serie elemento hermano rehegua rehe eforsa hagua chupekuéra petet ancho jojape ejagarra aja opaite espacio horizontal ojeguerekóva. Ko’ýte ideprovécho ojeguata hag̃ua peteĩchagua ancho, térã ojehustifikáva.

Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<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>

Oĩ avei umi variación ombohováiva flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill

Okakuaa ha oñemboguejy

Eipuru .flex-grow-*umi utilidad embohasa hag̃ua peteĩ elemento flex ikatuha okakuaa omyenyhẽ hag̃ua espacio ojeguerekóva. Pe techapyrã iguýpe, umi .flex-grow-1elemento oipuru opaite espacio ojeguerekóva ikatúva, oheja aja umi mokõi elemento flex hembývape espacio oikotevẽva.

Flex artículo rehegua
Flex artículo rehegua
Mbohapyha elemento flex rehegua
<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>

Eipuru .flex-shrink-*umi utilidad emoambue hag̃ua peteĩ mbaꞌe flex ikatuha oñemboguejy tekotevẽramo. Pe techapyrã iguýpe, mokõiha flex elemento orekóva .flex-shrink-1ojeobliga ombojere hag̃ua ipypegua peteĩ línea pyahúpe, “oñemboguejýva” oheja hag̃ua hetave espacio pe elemento flex mboyvegua ndive .w-100.

Flex artículo rehegua
Flex artículo rehegua
<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>

Oĩ avei umi variación ombohováiva flex-growha 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

Umi márgen auto rehegua

Flexbox ikatu ojapo algunas cosas bastante asombrosas rembojehe’ávo alineaciones flex umi margen auto reheve. Koꞌape ojehechauka mbohapy techapyrã ojejoko hag̃ua umi mbaꞌe flex rehegua umi mbaꞌe auto margen rupive: por defecto (ndaipóri margen auto rehegua), oñembohasávo mokõi mbaꞌe akatúa gotyo ( .mr-auto), ha ojepyso mokõi mbaꞌe akatúa gotyo ( .ml-auto).

Ñambyasy, IE10 ha IE11 ndoipytyvõi hekopete umi margen automático umi elemento flex rehe ituvakuéra oguerekóva justify-contentvalor ndahaꞌeiva por defecto. Ehecha ko StackOverflow ñembohovái reikuaave hag̃ua.

Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<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>

Umi mba’e-kuéra alineación reheve

Emoinge verticalmente petet mba e flexión rehegua petet mba yru yvate téra guy gotyo embojehe ávo align-items, flex-direction: column, ha margin-top: autotéra margin-bottom: auto.

Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<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>

Ape

Emoambue mbaꞌeichaitépa oñembojere umi mbaꞌe flex rehegua peteĩ mbaꞌerepy flex rehegua. Eiporavo mba’eveichagua envoltura apytégui (kundahára por defecto) .flex-nowrap, envoltura con .flex-wrap, térã envoltura inversa con .flex-wrap-reverse.

Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<div class="d-flex flex-nowrap">
  ...
</div>
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<div class="d-flex flex-wrap">
  ...
</div>
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Oĩ avei umi variación ombohováiva 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

Hekopete

Emoambue orden visual umi elemento flex específico rehegua peteĩ puñado de orderutilidad reheve. Rome’ẽ opción añoite ojejapo hag̃ua peteĩ mba’e peteĩha térã ipahaitépe, avei peteĩ reset ojepuru hag̃ua DOM ñe’ẽmondo. Oguerahaháicha orderoimeraẽva papapy entero mbaꞌekuaarã (techapyrã, 5), emoĩve CSS jeporupyre oimeraẽva mbaꞌekuaarã ambuéva oñeikotevẽvape g̃uarã.

Primer artículo flexión rehegua
Mokõiha elemento flex rehegua
Mbohapyha elemento flex rehegua
<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>

Oĩ avei umi variación ombohováiva 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

Oñemohenda contenido rehegua

Eipuru align-contentumi utilidad umi mbaꞌeryru flexbox rehegua emohenda hag̃ua umi mbaꞌe flex rehegua oñondive eje kurusu rehe. Eiporavo start(navegador por defecto), end, center, between, around, térã stretch. Ohechauka haguã ko'ã utilidad, romoañete flex-wrap: wrapha rombohetave umi artículo flex.

¡Akã yvate! Ko propiedad ndorekói efecto umi fila peteĩva rehe umi elemento flex rehe.

Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<div class="d-flex align-content-end flex-wrap">...</div>
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<div class="d-flex align-content-center flex-wrap">...</div>
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<div class="d-flex align-content-between flex-wrap">...</div>
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<div class="d-flex align-content-around flex-wrap">...</div>
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
<div class="d-flex align-content-stretch flex-wrap">...</div>

Oĩ avei umi variación ombohováiva 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