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">I'm a flexbox container!</div>

Che ha'e peteĩ mba'yru flexbox en línea!

<div class="d-inline-flex p-2">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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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

<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

<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