Aprenda CSS Flexbox en 5 minutos: un tutorial para principiantes

Una rápida introducción al popular módulo de diseño

En esta publicación, aprenderá los conceptos básicos de CSS Flexbox, que se ha convertido en una habilidad imprescindible para los desarrolladores y diseñadores web en los últimos años.

Usaremos una barra de navegación como ejemplo, ya que este es un caso de uso muy típico de Flexbox. Esto le presentará las propiedades más utilizadas del módulo y dejará de lado las que no son tan críticas.

También he creado un curso gratuito de 12 partes sobre Flexbox. ¡Compruébalo aquí si estás interesado!

¡Ahora comencemos!

Tu primer diseño de Flexbox

Los dos componentes principales de un diseño Flexbox son el contenedor y los artículos .

Aquí está el HTML de nuestro ejemplo, que contiene un contenedor con tres elementos:

 Home Search Logout 

Antes de convertir esto en un diseño de Flexbox, los elementos se apilarán uno encima del otro de esta manera:

He añadido un poco de estilo, pero eso no tiene nada que ver con Flexbox.

He añadido un poco de estilo, pero eso no tiene nada que ver con Flexbox.

Para convertir esto en un diseño de Flexbox, simplemente le daremos al contenedor la siguiente propiedad CSS:

.container { display: flex; } 

Esto colocará automáticamente los elementos a lo largo del eje horizontal.

Si desea consultar el código real, puede dirigirse a este parque infantil de Scrimba.

Ahora mezclemos un poco estos elementos.

Justificar contenido y alinear elementos

Justify-content y align-items son dos propiedades de CSS que nos ayudan a distribuir los elementos en el contenedor. Controlan cómo se colocan los elementos a lo largo del eje principal y el eje transversal .

En nuestro caso (pero no siempre) el eje principal es horizontal y el eje transversal es vertical:

En este artículo, solo veremos justify-content, ya que descubrí que estoy usando este mucho más que align-items. Sin embargo, en mi curso de Flexbox, explico ambas propiedades en detalle.

Centremos todos los elementos a lo largo del eje principal usando justify-content:

.container { display: flex; justify-content: center; } 

O podemos configurarlo en space-between, lo que agregará espacio entre los elementos, así:

.container { display: flex; justify-content: space-between; } 

Estos son los valores que puede establecer justify-content:

  • flex-start ( predeterminado )
  • extremo flexible
  • centrar
  • espacio entre
  • espacio alrededor
  • espacio uniforme

Te recomiendo que juegues con estos y veas cómo se desarrollan en la página. Eso debería darle una comprensión adecuada del concepto.

Controlar un solo artículo

También podemos controlar elementos individuales . Digamos que, por ejemplo, queremos mantener los dos primeros elementos en el lado izquierdo, pero mover el logoutbotón al lado derecho.

Para hacer esto usaremos la vieja técnica de establecer el margen en auto.

.logout { margin-left: auto; } 

Si queremos que tanto el searchelemento como el logoutelemento se empujen hacia el lado derecho, simplemente agregaremos margin-leftel searchelemento al elemento.

.search { margin-left: auto; } 

Empujará el elemento de búsqueda lo más hacia la derecha posible, lo que de nuevo empujará el elemento de cierre de sesión con él:

La propiedad flex

Hasta ahora, solo hemos tenido elementos de ancho fijo. Pero, ¿y si queremos que respondan? Para lograrlo tenemos una propiedad llamada flex. Lo hace mucho más fácil que la antigua forma de usar porcentajes.

Simplemente apuntaremos a todos los elementos y les daremos un flexvalor de 1.

.container > div { flex: 1; } 

Como puede ver, estira los artículos para llenar todo el contenedor.

En muchos casos, es probable que desee que uno de los elementos ocupe el ancho adicional y, por lo tanto, solo configure uno de ellos para que tenga un ancho flexible. Podemos, por ejemplo, hacer que el searchartículo ocupe todo el espacio extra:

.search { flex: 1; } 

Antes de terminar este artículo, quiero mencionar que la propiedad flex es en realidad una abreviatura de tres propiedades: flex-grow , flex-shrink y flex-base . Sin embargo, aprenderlos lleva más de cinco minutos, por lo que está fuera del alcance de este tutorial.

Sin embargo, si está interesado en aprenderlas, le explicaré las tres propiedades a fondo en mi curso gratuito de Flexbox.

Ahora que ha aprendido los conceptos básicos, definitivamente estará listo para tomar mi curso completo y convertirse en un maestro de Flexbox.

¡Gracias por leer! Mi nombre es Per Borgen, soy el cofundador de Scrimba, la forma más fácil de aprender a codificar. Debe consultar nuestro bootcamp de diseño web receptivo si desea aprender a construir un sitio web moderno a nivel profesional.