Flex
Clases para manejar flex items
Uso básico
Para poder usar flex items usar la clase is-flex
Flex item 1
Flex item 2
Flex item 3
...
<div class="is-flex is-gap-3">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>...</div>
</div>
Flex direction
Row
Usa is-flex-row para configurar la dirección horizontal
Flex item 1
Flex item 2
Flex item 3
...
tip
Por defecto usando solo is-flex ya está configurado como flex row
Column
Usa is-flex-column para configurar la dirección vertical
Flex item 1
Flex item 2
Flex item 3
...
<div class="is-flex is-flex-column is-gap-3">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>...</div>
</div>
Gap
Usa is-gap-{size} para agregar espacio entre los elementos flexibles. El size es un valor entre 0 a 6
Ejemplos
is-gap-3
Flex item 1
Flex item 2
Flex item 3
...
<div class="is-flex is-flex-column is-gap-3">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>...</div>
</div>
is-gap-1
Flex item 1
Flex item 2
Flex item 3
...
<div class="is-flex is-flex-column is-gap-1">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>...</div>
</div>
Justify content
| Clase | Propiedad |
|---|---|
| justify-content: flex-start |
| justify-content: flex-end |
| justify-content: center |
| justify-content: space-between |
| justify-content: space-around |
| justify-content: space-evenly |
Gráfica
flex-start
is-justify-content-flex-start
flex-end
is-justify-content-flex-end
center
is-justify-content-center
space-between
is-justify-content-space-between
space-evenly
is-justify-content-space-evenly
Ejemplos
.is-justify-content-center
Flex item 1
Flex item 2
...
<div class="is-flex is-justify-content-center is-gap-3">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>...</div>
</div>
.is-justify-content-space-between
Flex item 1
Flex item 2
Flex item 3
...
<div class="is-flex is-justify-content-space-between">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>...</div>
</div>
Align items
| Clase | Propiedad |
|---|---|
| align-items: flex-start |
| align-items: flex-end |
| align-items: center |
| align-items: stretch |
| align-items: baseline |
Gráfica
flex-start
is-align-items-flex-start
flex-end
is-align-items-flex-end
center
is-align-items-center
stretch
is-align-items-stretch
baseline
is-align-items-baseline
Ejemplos
.is-align-items-center
Flex item 1
Flex item 2
Flex item 3
<div class="is-flex is-align-items-center is-gap-3">
<div class="py-2">Flex item 1</div>
<div class="py-10">Flex item 2</div>
<div class="py-6">Flex item 3</div>
</div>
.is-flex-column .is-align-items-center
Flex item 1
Flex item 2
Flex item 3
<div class="is-flex is-flex-column is-align-items-center is-gap-3">
<div class="px-2">Flex item 1</div>
<div class="px-10">Flex item 2</div>
<div class="px-6">Flex item 3</div>
</div>
Align content
info
Es útil cuando se trabaja con contenedores flexibles que tienen múltiples líneas de elementos flexibles (es decir, cuando flex-wrap está configurado en wrap o wrap-reverse).
| Clase | Propiedad |
|---|---|
| align-content: flex-start |
| align-content: flex-end |
| align-content: center |
| align-content: space-between |
| align-content: space-around |
| align-content: space-evenly |
| align-content: stretch |
Gráfica
flex-start
is-align-content-flex-start
flex-end
is-align-content-flex-end
center
is-align-content-center
space-between
is-align-content-space-between
space-around
is-align-content-space-around
space-evenly
is-align-content-space-evenly
space-stretch
is-align-content-space-stretch