Pyso
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.
<div class="d-flex p-2">I'm a flexbox container!</div><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.
<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.
<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.
<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.
<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).
<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.
<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.
<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.
<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).
<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.
<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.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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ã.
<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.
<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>
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.
<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:
<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,
),
),