Propiedades Flexbox CSS
Flexbox, también conocido como modelo de caja flexible, es un diseño unidimensional que permite crear un diseño más eficiente y predecible en situaciones donde el tamaño de los elementos es desconocido o dinámico. Este modelo flexible no necesita utilizar los métodos tradicionales de posicionamiento de cajas (static, relative, absolute o float) sino que organiza los elementos utilizando contenedores flexibles.
Diseño unidimensional: Flexbox trabaja en una dimensión a la vez, ya sea en fila o en columna. Esto permite una fácil alineación y distribución de elementos a lo largo de un eje principal (main axis) y un eje transversal (cross axis).
Para utilizar Flexbox, primero debes declarar un contenedor como un contenedor flexible utilizando display: flex o display: inline-flex. Los elementos hijos de este contenedor se convierten automáticamente en elementos flexibles.
1. display: flex | inline-flex
La propiedad display en CSS determina cómo se muestra un elemento en el diseño de la página. En el contexto de flexbox, estos dos valores, flex e inline-flex, se utilizan para establecer un contenedor como un contenedor flexible.
Diferencia visual entre los valores flex e inline-flex:
- flex: Cuando aplicas display: flex a un contenedor, este se convierte en un contenedor flexible que distribuye su contenido de manera flexible a lo largo del eje principal. Por defecto, el eje principal es horizontal (de izquierda a derecha). Los elementos secundarios dentro de este contenedor flex se comportarán como bloques y se ajustarán automáticamente para llenar el contenedor en la dirección principal.
.contenedor-flex {
display: flex;
}
inline-flex: Este valor es similar a display: flex, pero el contenedor flexible se comporta como un elemento en línea en lugar de un bloque. Esto significa que ocupará solo el ancho necesario y permitirá que otros elementos en línea coexistan en la misma línea.
.contenedor-inline-flex {
display: inline-flex;
}
Ejemplo en CodePen
2. flex-wrap: nowrap | wrap | wrap-reverse
Podemos indicar qué elementos flexibles se deben trasladar cuando no hay suficiente espacio en el contenedor mediante la propiedad flex-wrap. Sus valores son los siguientes:
- nowrap: los elementos no pasan a la siguiente fila y se reduce su anchura para mostrarlos. Este es el valor por defecto.
- wrap: los elementos pasan a la siguiente fila y conservan su anchura.
- wrap-reverse: los elementos pasan a la siguiente fila, pero en sentido inverso al de su
declaración.
#container{
display: flex;
flex-wrap: wrap;
}
Ejemplo
3. justify-content: flex-start | flex-end | center | space-between |space-around
La propiedad justify-content es la que define la justificación horizontal de los elementos hijos de un contenedor flexible. Esta propiedad acepta cinco valores:
- flex-start: posiciona los elementos a la izquierda del contenedor. Valor por defecto.
- flex-end: posiciona los elementos a la derecha del contenedor.
- center: centra los elementos en el contenedor
- space-between: añade un espacio idéntico entre los elementos. El primer elemento está alineado a la izquierda del contenedor, y el último, a la derecha.
- space-around: espacia de forma regular los elementos que no están alineados a la izquierda y a la derecha del contenedor.
#container{
display: flex;
justify-content: flex-start;
}
Ejemplo
4. align-items: stretch | flex-start | flex-end | center | baseline
La propiedad align-items actúa sobre el eje transversal del contenedor flex. Cuando flex-direction es row, este eje es vertical. No es obligatorio definir flex-direction: row, ya que es el valor por defecto.
La propiedad align-items acepta cinco valores:
- stretch: los elementos se amplían verticalmente para ocupar toda la altura disponible en el contenedor. Este es el valor por defecto.
- flex-start: los elementos se colocan en la parte superior del contenedor.
- flex-end: los elementos se colocan en la parte inferior del contenedor.
- center: los elementos se colocan en el centro del contenedor.
- baseline: los elementos se alinean sobre la línea de base del texto.
#container{
display: flex;
flex-direction: row;
align-items: stretch;
}
Ejemplo
5. flex-direction: row | row-reverse | column | column-reverse
La propiedad flex-direction determina la dirección en la que los elementos flexibles se colocan dentro de un contenedor flex. Puede establecerse para organizar los elementos en una fila (horizontal) o en una columna (vertical).
La propiedad flex-direction acepta cuatro valores:
- row (valor por defecto): Coloca los elementos en una fila horizontal. El inicio está a la izquierda y el final a la derecha.
- row-reverse: Coloca los elementos en una fila horizontal, pero en orden inverso al valor por defecto. El inicio estará a la derecha y el final a la izquierda.
- column: Coloca los elementos en una columna vertical. El inicio está arriba y el final abajo.
- column-reverse: Coloca los elementos en una columna vertical, pero en orden inverso al valor por defecto. El inicio estará abajo y el final arriba.
#container {
display: flex;
flex-direction: row;
}
Ejemplo
6. Otras propiedades
Las propiedades de Flexbox que hemos visto son las más comunes y utilizadas para controlar el comportamiento de los elementos flex. Sin embargo, hay más propiedades disponibles que te permiten tener un mayor control sobre el diseño de tus elementos flex. Algunas de estas propiedades adicionales incluyen order, flex-grow, flex-shrink, y flex-basis, entre otras.
Para entender estas propiedades primero necesitamos un contenedor Flexbox:
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
.flex-container {
display: flex;
}
6.1. flex-grow
flex-grow define cómo un elemento debe crecer en relación con el resto de los elementos flexibles en el contenedor Flexbox.
.flex-item {
flex-grow: 1; /* Todos los elementos crecen de igual manera */
}
Si uno de los elementos tiene flex-grow: 2, ese elemento intentará ocupar el doble del espacio que los otros elementos.
6.2. flex-shrink
flex-shrink define cómo los elementos se encogen en relación con los demás cuando no hay suficiente espacio en el contenedor.
.flex-container {
display: flex;
width: 500px; /* Ancho total menor que la suma de los flex-basis */
}
.flex-item {
flex-basis: 200px;
}
/* Primer elemento */
.flex-container .flex-item:first-child {
flex-shrink: 0; /* Este elemento no se encogerá */
}
/* Segundo elemento */
.flex-container .flex-item:nth-child(2) {
flex-shrink: 2; /* Este elemento se encogerá el doble que el normal */
}
/* Tercer elemento */
.flex-container .flex-item:nth-child(3) {
flex-shrink: 1; /* Este elemento se encogerá normalmente */
}
6.3. flex-basis
flex-basis establece el tamaño inicial de un elemento antes de que se distribuya el espacio restante.
.flex-item {
flex-basis: 100px; /* Cada elemento comienza con 100px de ancho */
}
CodePen example
6.4. flex: propiedad abreviada
flex es una propiedad abreviada que combina flex-grow, flex-shrink y flex-basis.
.flex-item {
flex: 1 0 100px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 100px */
}
6.5. order
order cambia el orden en el que aparecen los elementos flexibles.
.flex-item {
order: 2; /* Pone este elemento en la segunda posición */
}
Los elementos con un valor menor de order se colocan antes. Por defecto, todos los elementos tienen order: 0.
7. Resumen de propiedades comunes
Veamos un resumen de algunas de las propiedades más utilizadas.
| Propiedad | Descripción | Valores Ejemplo |
|---|---|---|
| display | Define el contenedor como un flex container | flex |
| flex-wrap | Controla si los elementos flex deben trasladarse a la siguiente fila | nowrap (por defecto), wrap, wrap-reverse |
| justify-content | Alineación horizontal de los elementos de un contenedor flexible | flex-start (por defecto), flex-end, center, space-between, space-around, space-evenly |
| align-items | Alineación vertical de los elementos de un contenedor flexible | stretch (por defecto), flex-start, flex-end, center, baseline |
| flex-direction | Dirección de los elementos | row (por defecto), row-reverse, column, column-reverse |
| flex-grow | Controla cómo los elementos flex se expanden | Número (valor relativo) |
| flex-shrink | Controla cómo los elementos flex se encogen | Número (valor relativo) |
| flex-basis | Tamaño inicial de los elementos flex | Valor, auto (por defecto) |
| order | Orden de los elementos flex dentro del contenedor | Número (entero) |
Ejemplo práctico 1
Crea mediante Flexbox tres contenedores que se encuentren inicialmente en línea y que se vayan situando unos bajo de los otros según el ancho del dispositivo.
Ejemplo práctico 2
Crea una página web que contenga una barra de navegación horizontal en la parte superior, un pie de página en la parte inferior, y un área de contenido principal que tenga una sección principal y una barra lateral. Utiliza Flexbox para hacer que la barra lateral esté siempre a la derecha de la sección principal y para que la barra de navegación y el pie de página se extiendan a lo largo del ancho de la ventana del navegador.
Ejemplo práctico 3
Crea un encabezado que tenga un elemento a la izquierda (texto o imagen) y otro a la derecha (menú de navegación).
Para este ejercicio se utiliza un contenedor principal <header> y se distribuye el espacio de los elementos contenidos con justify-content: space-between. Los elementos del menú de navegación se establecen de tipo flex para alineación horizontal uno detrás del otro.
Ejemplo práctico 4
Crea un encabezado que tenga un elemento arriba (texto o imagen) y otro abajo (menú de navegación). Ambos elementos deben encontrarse centrados.
Para este ejercicio se utiliza un contenedor principal <header> y se alinean verticalmente sus elementos hijos con flex-direction: column. Los elementos del menú de navegación se establecen de tipo flex para alineación horizontal uno detrás del otro.
Ejemplo práctico 5
Crea un menú de navegación que ocupe el ancho total de la pantalla y que sus elementos crezcan para ocupar de forma uniforme el ancho total.
Para este ejercicio utilizamos la propiedad flex-grow para que los elementos del menú crezcan hasta ocupar el ancho total del menú de navegación.