Ejupi contenido principal-pe Eike docs jeguatahápe
Check

Pya’e emohenda ñemohenda, alineación ha tamaño umi columna cuadrícula rehegua, jeguata, componente ha hetave mba’e peteĩ suite henyhẽva umi utilidad flexbox 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!
html rehegua
<div class="d-flex p-2">I'm a flexbox container!</div>
Che ha'e peteĩ mba'yru flexbox en línea!
html rehegua
<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
  • .d-xxl-flex
  • .d-xxl-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
html rehegua
<div class="d-flex flex-row mb-3">
  <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
html rehegua
<div class="d-flex flex-column mb-3">
  <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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-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, around, térã evenly.

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
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>
<div class="d-flex justify-content-evenly">...</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-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

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
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

Myanyhẽ

Eipuru pe .flex-fillclase peteĩ serie elemento hermano rehegua embojere hag̃ua chupekuéra umi ancho ojoajúva ikonteído rehe (térã peteĩchagua ancho ndohasáiramo ikonteído-kuéra border-box-pe) ejagarra aja opaite espacio horizontal ojeguerekóva.

Flex artículo orekóva heta contenido
Flex artículo rehegua
Flex artículo rehegua
html rehegua
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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
  • .flex-xxl-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
html rehegua
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

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

Flex artículo rehegua
Flex artículo rehegua
html rehegua
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{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 ( .me-auto), ha ojepyso mokõi mbaꞌe akatúa gotyo ( .ms-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
Flex artículo rehegua
Flex artículo rehegua
Flex artículo rehegua
html rehegua
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">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
html rehegua
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-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. Ojeguerahaháicha orderoimeraẽva papapy entero valor 0 guive 5 peve, emoĩve CSS jeporupyre oimeraẽva valor adicional oñeikotevẽvape g̃uarã.

Primer artículo flexión rehegua
Mokõiha elemento flex rehegua
Mbohapyha elemento flex rehegua
html rehegua
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

Adicionalmente oî avei responsivo .order-firstha .order-lastclase omoambuéva pe orderde un elemento omoañetévo order: -1ha order: 6, respectivamente.

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

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 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-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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Objeto medios de comunicación rehegua

¿Reheka rembojevy hag̃ua componente objeto medio rehegua Bootstrap 4-gui? Emoheñói jey sapy’aitépe mbovymi utilidad flex reheve ohejáva hetave flexibilidad ha personalización yma guarégui.

Placeholder Image
Kóva ha’e algún contenido peteĩ componente medios de comunicación-gui. Ikatu remyengovia kóva oimeraẽ contenido rehe ha remohenda tekotevẽháicha.
html rehegua
<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Ha ere recentraseha verticalmente pe contenido ta anga ykére:

Placeholder Image
Kóva ha’e algún contenido peteĩ componente medios de comunicación-gui. Ikatu remyengovia kóva oimeraẽ contenido rehe ha remohenda tekotevẽháicha.
html rehegua
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Sass rehegua

API de Utilidades rehegua

Flexbox purupyrã ojedeclara ore purupyrã API-pe ary scss/_utilities.scss. Eikuaa mba’éichapa eipurukuaa API utilidad rehegua.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),