Skip to content
CSS
Selectores, propiedades y valores
Mecanismos para añadir CSS a un archivo HTML
Selectores
Pseudoclases y pseudoelementos
Cascada y especificidad
Herencia
Display
Modelo de cajas
Posicionamiento
Medidas
Colores
Z-index y el contexto de apilamiento
Responsive Design
Arquitectura CSS
Flexbox
More
Share
Explore

icon picker
Flexbox

⁠
image.png
⁠
⁠

Contenedor: Es el elemento padre que tendrá en su interior cada uno de los ítems flexibles. Observa que al contrario que muchas otras estructuras CSS, por norma general, en Flex establecemos las propiedades al elemento padre.
Eje principal: Los contenedores flexibles tendrán una orientación principal específica. Por defecto, el eje principal del contenedor flex es en horizontal (en fila).
Eje secundario: De la misma forma, los contenedores flexibles tendrán una orientación secundaria, perpendicular a la principal. Si la principal es en horizontal, la secundaria será en vertical (y viceversa).
Ítem: Cada uno de los hijos que tendrá el contenedor en su interior.

Modalidades de flex

<div class="container"> <!-- Flex container -->
<div class="item item-1">1</div> <!-- Flex items -->
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
Para activar el modo flex, utilizaremos sobre el elemento contenedor la propiedad display, y especificaremos el valor flex o inline-flex (dependiendo de como queramos que se comporte el contenedor).
Tipo de elemento
Descripción
1
inline-flex
Establece un contenedor en línea, similar a inline-block (ocupa solo el contenido).
2
flex
Establece un contenedor en bloque, similar a block (ocupa todo el ancho del padre).
There are no rows in this table
⁠

Dirección de los ejes

Existen dos propiedades principales para manipular la dirección y comportamiento de los ítems a lo largo del eje principal del contenedor. Son las que veremos a continuación:
Propiedad
Valor
Significado
1
flex-direction
row | row-reverse | column | column-reverse
Cambia la orientación del eje principal.
There are no rows in this table
⁠

Mediante la propiedad flex-direction podemos modificar la dirección del eje principal del contenedor para que se oriente en horizontal (valor por defecto) o en vertical. Además, también podemos incluir el sufijo -reverse para indicar que coloque los ítems en orden inverso.
⁠
image.png
⁠
⁠

Contenedor flex multilínea

En general, flex se suele utilizar para estructuras de una sola dimensión, es decir, contenedores que sólo van en una dirección. Sin embargo, existe una propiedad denominada flex-wrap con la que podemos especificar un comportamiento especial del contenedor.
⁠
image.png
⁠
⁠
Por defecto, si un elemento no cabe dentro de nuestro contenedor flex, los elementos se harán más pequeños (son flexibles) para ajustarlos al contenedor. Este es el comportamiento por defecto de un contenedor flex. Sin embargo, con la propiedad flex-wrap podemos cambiar este comportamiento y permitir que nuestro contenedor flex se desborde, convirtiéndose en un contenedor flex multilínea.

Propiedad
Valor
Significado
1
flex-wrap
nowrap | wrap | wrap-reverse
Evita o permite el desbordamiento (multilinea).
There are no rows in this table
⁠

⁠
Propiedades de alineación 
⁠
⁠

Ahora, tras el tema de
Introducción a Flex
⁠
, tenemos un control básico de un contenedor con ítems flexibles. Pero para alinear correctamente, necesitamos conocer las propiedades existentes dentro de flex para disponer los ítems dependiendo de nuestro objetivo.
Vamos a echar un vistazo a las siguientes propiedades, donde algunas actuan en el eje principal 1️⃣ (recordemos que por defecto es el horizontal), mientras que otras actuan en el eje secundario 2️⃣ (por defecto, el eje vertical):
Table 10
0
justify-content
flex-start | flex-end | center | space-between | space-around | space-evenly
1️⃣
1
align-items
flex-start | flex-end | center | stretch | baseline
2️⃣
2
align-content
flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
2️⃣
There are no rows in this table
⁠
De esta pequeña lista, hay que centrarse en la primera y la segunda propiedad, ya que son las principales. La última propiedad, align-content solo tiene efecto si tenemos un contenedor flex multilinea.
Antes, un pequeño resumen:
justify-content: Se utiliza para alinear los ítems del eje principal (por defecto, el horizontal).
align-items: Usada para alinear los ítems del eje secundario (por defecto, el vertical).
align-content: Se utiliza para alinear el contenido del eje secundario entre líneas (sólo en contenedor multilinea).

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.