Aprende CSS Flexbox en 5 minutos

Una introducción rápida 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.

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

También creé 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 de Flexbox son el contenedor y los elementos .

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

 <nav class = "contenedor"> 
<div> Inicio </ div>
<div> Buscar </ div>
<div> Cerrar sesión </ div>
</ nav>

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

He agregado 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 de CSS:

 .envase { 
pantalla: flexión;
}

Esto posicionará los elementos de forma automática a lo largo del eje horizontal.

Si desea ver el código real, puede dirigirse a este campo de juego de Scrimba.

Ahora mezclemos estos elementos un poco.

Justificar contenido y alinear elementos

Justificar-contenido y alinear-elementos son dos propiedades CSS que nos ayudan a distribuir los artículos 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 he encontrado que esta es mucho más que align-items . Sin embargo, en mi curso de Flexbox , explico ambas propiedades en detalle.

Centrémos todos los elementos a lo largo del eje principal usando justify-content :

 .envase { 
pantalla: flexión;
justify-content: center;
}

O podemos establecerlo en space-between , lo que agregará espacio entre los elementos, como este:

 .envase { 
pantalla: flexión;
justify-content: space-between;
}

Estos son los valores que puede establecer para justify-content:

  • flex-start ( predeterminado )
  • flex-end
  • centrar
  • espacio entre
  • espacio alrededor
  • espacio-uniformemente

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

Controlando un solo artículo

También podemos controlar artículos individuales. Digamos que, por ejemplo, queremos mantener los dos primeros elementos en el lado izquierdo, pero mueva el botón de logout hacia el lado derecho.

Para hacer esto, utilizaremos la buena técnica antigua de establecer el margen en auto .

 .cerrar sesión { 
margin-left: auto;
}

Si queremos que tanto el elemento de search como el de logout se coloquen en el lado derecho, simplemente agregaremos el margin-left al elemento de search .

 .buscar { 
margin-left: auto;
}

Empujará el elemento de búsqueda lo más hacia el lado derecho como sea posible, lo que nuevamente empujará el elemento de cierre de sesión con él:

La propiedad flex

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

Simplemente direccionaremos todos los artículos y les daremos un valor flex 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 artículos ocupe el ancho adicional y, por lo tanto, solo configure uno para que tenga un ancho flexible. Podemos, por ejemplo, hacer que el elemento de search ocupe todo el espacio adicional:

 .buscar { 
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-basis . Sin embargo, aprender eso lleva más de cinco minutos, por lo que está fuera del alcance de este tutorial.

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

¡Ahora que has aprendido los conceptos básicos, definitivamente estarás listo para tomar mi curso completo y convertirte en un maestro de Flexbox!