logo Carlos blanco

Flex CSS, Guía Completa para que domines Flexbox

¿Te has encontrado alguna vez con una estructura de diseño web que parece imposible de manejar? ¿Te has sentido abrumado por los desafíos de crear una disposición de elementos que funcione en todos los dispositivos? Si es así, Flex CSS es la respuesta a tus problemas.

Este artículo te llevará a través de un viaje para descubrir todo lo que necesitas saber sobre Flexbox CSS. ¡Empezamos!

thumbnail css Flex

¿Qué es Flex CSS o Flexbox?

Flex CSS o Flexbox es un modelo de diseño en CSS que permite diseñar estructuras complejas con un código más eficiente y predecible. Su magia radica en su habilidad para distribuir el espacio y alinear los elementos, incluso cuando sus tamaños son desconocidos o dinámicos.

CSS Flex funciona gracias a Contenedores, elementos y reglas.

Es una manera increíblemente útil y versátil de organizar cosas (elementos) en un espacio (contenedor) en tu página web. Es como un juego de organización que te permite controlar cómo y dónde se colocan las cosas, y se ajusta automáticamente para lucir perfecto en cualquier dispositivo. Es una herramienta esencial para cualquiera que quiera crear una página web que se vea profesional y sea fácil de usar.

Flexbox Cheat Sheet

Como hemos comentado antes, Flexbox se basa en la idea de contenedores y elementos. A continuación, te explicaré las propiedades tanto para contenedores como para elementos.

Antes de empezar a aplicar las propiedades FLEX, mi código de ejemplo está tal que así:

				
					<section id="padre">

    <div class="caja"></div>
    <div class="caja"></div>
    <div class="caja"></div>
    <div class="caja"></div>
    <div class="caja"></div>

</section>

				
			
				
					#padre{
    width: 100%;
    height: 40em;
    background-color: #1851F1;
    padding:20px;
    
}

.caja{
    height: 150px;
    width: 150px;
    background-color: #111111;
    border-radius: 7px;
    margin:15px;

}


				
			

El resultado que se pinta en pantalla es: 

resultado-inicial-antes-de-flex-css

Definiendo el contenedor como flexible. Lo Básico.

Display flex css

Para empezar con Flex CSS, necesitas definir un contenedor flex utilizando display flex css. Aquí tienes un ejemplo básico, aplicado al identificador #Padre:

				
					#padre{
    width: 100%;
    height: 40em;
    background-color: #1851F1;
    padding:20px;
    Display:flex;
}



				
			
ejemplo-aplicando-display-flex

Es la propiedad principal que define un contenedor como flexible. Puedes usar display: flex o display: inline-flex si quieres que el contenedor se comporte como un elemento en línea.

Orden y Orientación del Contenedor

Order flex CSS

Cuando no se indica nada concreto, las «cajas» o elementos se ordenan de manera natural de izquierda a derecha, sin embargo, puedo añadirle la propiedad order con CSS para establecer el orden que necesite.

El código sería el siguiente:

				
					#padre :nth-child(1) { order: 3; }
#padre :nth-child(2) { order: 4; }
#padre :nth-child(3) { order: 1; }
#padre :nth-child(4) { order: 5; }
#padre :nth-child(5) { order: 2; }

				
			

Este código está aplicando a todos los «hijos» o elementos del ID #padre un orden concreto gracias a :nth-child(x). En este caso aplicando :nth-child(1) { order: 2;} lo que dice es, al primer hijo (elemento) de ese Padre (contenedor) me lo pones en el orden 2 en lugar del primero, y así todos.

:nth-child() sirve para hacer referencia al hijo de un padre concreto. Este sería el resultado:

ejemplo-aplicando-order-flex

Flex Direction CSS

Controla la dirección principal en la que se colocan los elementos flexibles. Es una propiedad que se le aplica al contenedor, en este ejemplo, al #padre. Las opciones son:

Row

Ordena los elementos hijos de forma horizontal de izquierda a derecha.

				
					#padre{
    Display:flex;
    flex-direction:row;
}
				
			

Row-reverse

Ordena los elementos hijos de forma horizontal de derecha a izquierda.

				
					#padre{
    Display:flex;
    flex-direction:row-reverse;
}
				
			

Column

Ordena los elementos hijos de forma vertical de arriba a abajo.

				
					#padre{
    Display:flex;
    flex-direction:column;
}
				
			

Column-reverse

Ordena los elementos hijos de forma vertical de abajo a arriba.

				
					#padre{
    Display:flex;
    flex-direction:column-reverse;
}
				
			

Flex-Wrap CSS

Esta propiedad controla si los elementos flexibles se envolverán o no dentro del contenedor. Las opciones incluyen:

No-wrap

Todos los elementos en una línea.

				
					#padre{
    Display:flex;
    flex-wrap:nowrap;
}
				
			

Wrap

Los elementos se envuelven en varias líneas, en función del tamaño del contenedor

				
					
#padre{
    Display:flex;
    flex-wrap:wrap;
}

				
			

Wrap-reverse

Envolver en varias líneas en dirección inversa.

				
					#padre{
    Display:flex;
    flex-wrap:wrap-reverse;
}
				
			

Flex-Flow

flex-flow es una propiedad abreviada en CSS que te permite establecer simultáneamente las propiedades flex-direction y flex-wrap. Es especialmente útil cuando quieres definir cómo los elementos flexibles se distribuirán y si se permitirá que se envuelvan dentro del contenedor flex.

Puedes usar los siguientes valores:

  • flex-direction: row, row-reverse, column, column-reverse.
  • flex-wrap: nowrap, wrap, wrap-reverse.

 

La sintaxis de flex-flow es bastante sencilla, y aquí te muestro un ejemplo con código:

				
					#padre {
  display: flex;
  flex-flow: row wrap;
}

				
			

Aquí, la dirección de los elementos flexibles es row, lo que significa que se colocarán de izquierda a derecha, y la propiedad wrap permite que los elementos se envuelvan en varias líneas si no hay suficiente espacio en una sola línea.

Con respecto a los valores, puedes combinarlos como quieras. Vamos a ver otro ejemplo: 

				
					#padre {
  display: flex;
  flex-flow: column-reverse wrap-reverse;
}
				
			
ejemplo-display-flex-flow-reverse

Alineación de Elementos

Justify Content

La propiedad justify-content en Flexbox es una herramienta esencial que te ayuda a alinear y distribuir los elementos dentro de un contenedor a lo largo del eje principal. 

Sigue siendo una propiedad que se aplica al elemento Padre (Contenedor)

Los posibles valores para Justify Content son: 

Flex-start

Alinea los elementos al inicio del eje principal.

				
					#padre {
  display: flex;
  justify-content: flex-start;
}
				
			

Flex-end

Alinea los elementos al final del ejo principal.

				
					#padre {
  display: flex;
  justify-content: flex-end;
}
				
			

Center

Alinea los elementos en el centro del eje principal.

				
					#padre {
  display: flex;
  justify-content: center;
}
				
			

Space-between

Distribuye el espacio entre los elementos de manera uniforme, con el primer elemento al inicio y el último al final del eje principal.

				
					#padre {
  display: flex;
  justify-content: space-between;
}
				
			

Space-around

Distribuye el espacio alrededor de los elementos de manera uniforme, con un espacio igual antes y después de cada elemento.

				
					#padre {
  display: flex;
  justify-content: space-around;
}
				
			

Space-evenly

Distribuye el espacio de manera uniforme entre los elementos, así como antes del primer elemento y después del último.

				
					#padre {
  display: flex;
  justify-content: space-evenly;
}
				
			

Align-items CSS

Vamos a explorar ahora las propiedades align-items y align-self en Flex CSS, ambas centradas en el alineamiento a lo largo del eje transversal. 

Justify content alinea los elementos según el eje horizontal del contenedor, Align Items en cambio, los organiza según el eje vertical de éste. 

Los valores de Align Items en CSS pueden ser: 

Flex-Start

Alinea los elementos al inicio del eje vertical.

				
					#padre {
  display: flex;
  align-items: flex-start;
}
				
			

Flex-End

Alinea los elementos al final del eje vertical.

				
					#padre {
  display: flex;
  align-items: flex-end;
}
				
			

Center

Alinea los elementos en el centro del eje vertical.

				
					#padre {
  display: flex;
  align-items: center;
}
				
			

Baseline

Alinea los elementos en su línea base, útil cuando los elementos tienen diferentes tamaños de fuente.

				
					#padre {
  display: flex;
  align-items: baseline;
}
				
			

Stretch

Estira los elementos para ocupar todo el alto del contenedor. Este es el valor predeterminado.

				
					#padre {
  display: flex;
  align-items: stretch;
}
				
			

Align-self CSS

La propiedad align-self se aplica a los elementos individuales dentro del contenedor flex y permite anular el alineamiento establecido por align-items para ese elemento específico.

Los valores que puedes usar son los mismos que para align-items

				
					#padre {
  display: flex;
  align-items: center;
}

.item-special {
  align-self: flex-start;
}

				
			

En este caso, todos los elementos se centrarán en el eje transversal debido a align-items: center, pero el elemento con la clase item-special se alineará al inicio del eje transversal gracias a align-self: flex-start.

ejemplo-css-flex-align-self

Align-content CSS

La propiedad align-content es utilizada en contenedores flex multi-línea (es decir, cuando flex-wrap está en wrap o wrap-reverse). Controla la distribución del espacio a lo largo del eje transversal.

Los valores más comunes de align-content y sus ejemplos:

Flex Start

Agrupa todas las líneas al inicio del contenedor flex

				
					#padre {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
				
			

Flex End

Agrupa todas las líneas al final del contenedor flex

				
					#padre {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
				
			

Center

Agrupa todas las líneas en el centro del contenedor flex

				
					#padre {
display: flex;
flex-wrap: wrap;
align-content: center;
}
				
			

Space-Between

Distribuye el espacio de manera uniforme entre las líneas, colocando la primera línea al inicio y la última al final del contenedor.

				
					#padre {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
				
			

Space-around

Distribuye el espacio de manera uniforme alrededor de las líneas.

				
					#padre {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
				
			

Stretch

Estira las líneas para tomar todo el espacio disponible en el contenedor. Este es el valor predeterminado si no se especifica ninguna propiedad align-content.

				
					#padre {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
				
			

align-content solo actúa cuando hay más de una línea de elementos flexibles. Si solo hay una línea, align-content no tiene ningún efecto.

Flexibilidad de Elementos

Flex Grow CSS

La propiedad flex-grow es una de las tres propiedades principales que permiten un control detallado sobre cómo se distribuyen los elementos flexibles dentro de un contenedor flex. Específicamente, flex-grow define la habilidad de un elemento para crecer si es necesario, para ocupar espacio adicional en el contenedor flex.

				
					#padre {
display: flex;
height: 450px;
}

.hijo1, .hijo2, .hijo3, .hijo4 {
flex-grow: 0;
width: 150px;
height: 150px;
}
				
			
ejemplo-flex-css-flex-grow

En el caso anterior, hemos aplicado Flex Grow con un valor de 0. Este es el valor por defecto de los elementos hasta que se indique lo contrario. Por tanto, cada hijo ocupa el mismo espacio dentro del contenedor padre. 

Los valores típicos de Grow son:

  • 0 : El valor predeterminado. El elemento no crecerá automáticamente para ocupar espacio adicional, independientemente de cuánto espacio haya en el contenedor.

  • 1 o cualquier número positivo: El elemento puede crecer para ocupar cualquier espacio adicional en el contenedor, proporcionalmente a su valor flex-grow

 

Vamos a ver ahora que ocurre si a un elemento hijo le damos otro valor de Grow: 

				
					#padre {
display: flex;
height: 450px;
}

.hijo1, .hijo2, .hijo3, .hijo4 {
flex-grow: 0;
width: 150px;
height: 150px;
}

.hijo3{
  flex-grow: 1;
}
				
			
ejemplo-flex-css-flex-grow-1

Como se puede ver, al hijo 3 le hemos dado un valor de Grow de 1. Entonces, crece todo lo necesario hasta que los elementos ocupen todo el ancho del padre (Contenedor)

Flex shrink CSS

La propiedad flex-shrink define la capacidad de un elemento flex para reducirse si es necesario, para adaptarse al contenedor flex cuando el espacio es insuficiente. Es el opuesto de flex-grow, que se encarga de cómo los elementos se expanden para ocupar el espacio adicional.

La propiedad flex-shrink acepta un valor unitario (un número sin unidades), que establece la proporción de reducción en relación con otros elementos flexibles (hijos) dentro del contenedor.

Vamos a ver un ejemplo: 

				
					#padre {
display: flex;
height: 450px;
width: 500px;
}

.hijo1, .hijo2, .hijo3, .hijo4 {
width: 150px;
height: 150px;
flex-shrink: 0;
}
				
			

Si observamos el código anterior, podemos ver como el Contenedor (#Padre) tiene un ancho de 500 px y, sumando todos los elementos (hijos), ocupan 600 px de ancho, es decir, 100px más que el Contenedor. 

Al tener la propiedad Flex Shrink con un valor de 0, estos elementos hijos van a sobrepasar al contenedor #Padre

ejemplo-flexbox-flex-shrink-0

Vamos a observar ahora como, al aplicar a todos los elementos la propiedad Shrink con un valor positivo de «1», los elementos hijos van a adaptarse al tamaño del contenedor:

				
					#padre {
display: flex;
height: 450px;
width: 500px;
}

.hijo1, .hijo2, .hijo3, .hijo4 {
width: 150px;
height: 150px;
flex-shrink: 1;
}
				
			
ejemplo-flexbox-flex-shrink-1

¿Y qué pasará si sólo le aplico un valor positivo a uno de los elementos hijos y al resto los dejo en «0»? Pues, lo que ocurre es que ese elemento se encoge todo lo necesario para que sus elementos «hermanos» quepan dentro del contenedor. 

				
					#padre {
display: flex;
height: 450px;
width: 500px;
}

.hijo1, .hijo2, .hijo4 {
width: 150px;
height: 150px;
flex-shrink: 0;
}

.hijo3{
flex-shrink: 1;
}

				
			

Si no especificamos ningún valor concreto en Flex Shrink, el valor por defecto será Auto, lo que provocará que los elementos se ajusten al tamaño del contenedor. 

Flex Basis CSS

La propiedad flex-basis es esencial para comprender el comportamiento de Flexbox. Específicamente, define el tamaño base de un elemento antes de que se distribuya cualquier espacio adicional (flex-grow) o se reduzca (flex-shrink) dentro del contenedor.

Mientras que flex-grow y flex-shrink determinan cómo se debe distribuir o reducir el espacio, flex-basis establece un punto de referencia sobre el cual estas otras propiedades operan.

Establece las medias base de un elemento concreto

Flex Basis permite los siguientes valores: 

  • Valor específico, por ejemplo, 200px, 50%, etc.
  • auto: El tamaño base se calcula según el tamaño del contenido del elemento. Es el valor predeterminado.
				
					#padre {
display: flex;
}

.hijo1, .hijo2, .hijo4 {
flex-basis:50px;
}

.hijo3{
flex-basis: 400px;
}
				
			
flexbox-css-ejemplo-flex-basis

Como se puede observar, al tercer elemento (hijo 3) se le ha añadido un valor de Flex Basis de 400px, por lo cual, «roba» espacio a los otros elementos hasta adaptarse al contenedor. 

Si por ejemplo, al hijo 3 le hubiese dado un valor en píxeles superior a las medidas del contenedor, no se aplicaría dado que debe responder a los límites del #padre. 

Pero como te imaginarás, esto es así siempre y cuando no se aplique Flex Shrink=0, si esta propiedad entrara en juego, entonces el hijo3 sobrepasaría las dimensiones del padre. 

Enlaces y Recursos de Interés

Puedes encontrar más información en las siguientes Webs Oficiales:

 

Categorías

Artículos Relacionados