Cómo crear diseños inteligentes solo con CSS con Flexbox

El cuadro flexible, o Flexbox en resumen, es un conjunto de propiedades en CSS introducido en 2009 para proporcionar un sistema de diseño nuevo y excepcional. El módulo Flexbox se identifica como parte de la tercera versión de CSS (CSS3).

Probablemente ya esté utilizando muchas de las nuevas propiedades en CSS3, como box-shadow , border-radius , background degradados , etc. Sin embargo, Flexbox aún no ha visto la adopción generalizada que merece. Esto puede deberse a todos los cambios importantes que ha sufrido a lo largo de los años, o porque solo es compatible parcialmente con Internet Explorer 10, o simplemente porque Flexbox es un ecosistema completo, mientras que los paradigmas anteriores se han basado predominantemente en un único sistema listo para usar. ir propiedades.

Es superpotente y ofrece un amplio abanico de opciones para conseguir maquetaciones que antes solo se podían soñar.

Este artículo lo guiará a través de los conceptos básicos de Flexbox y cómo puede usarlo para lograr algunos diseños realmente geniales que de otro modo requerirían trucos CSS complicados o incluso JavaScript.

¿Por qué usar FlexBox?

De forma predeterminada, los elementos de nivel de bloque HTML se apilan, por lo que si desea alinearlos en una fila, debe confiar en las propiedades de CSS como float o manipular la propiedad de display con configuraciones de tabla o de bloque en línea.

Si elige usar float (izquierda o derecha), debe borrar el envoltorio en algún punto para empujarlo hasta el último elemento flotante, de lo contrario, se desbordará sobre cualquier cosa que venga después. Sin embargo, con float, está limitado a organizar elementos horizontalmente.

¡Alternativamente, o además, puede manipular la propiedad de display para intentar lograr el diseño que desea! Pero esto a menudo se siente torpe en el mejor de los casos, por no mencionar tedioso, y a menudo da como resultado un diseño bastante frágil que no necesariamente se mostrará de manera consistente en todos los navegadores. Este enfoque es particularmente ineficaz si está apuntando a múltiples dispositivos de diferentes tamaños, lo que casi siempre es el caso hoy en día.

¡Entra en Flexbox!

Con una regla simple aplicada a un elemento principal, puede controlar fácilmente el comportamiento de diseño de todos sus elementos secundarios.

Con Flexbox, puedes:

• Invierta el orden de los elementos dentro de un padre Flexbox.
• Envuelva los elementos secundarios en columnas (el número de columnas puede variar según la altura del elemento secundario y principal).
• Especifique la velocidad a la que crecen o se reducen los elementos mientras cambia el tamaño de la ventana gráfica.
• Controle si los elementos se pueden contraer o no, independientemente del tipo de unidad de ancho especificado (relativo o absoluto).
• Cambia el orden de los elementos con CSS (combina esto con media queries y encontrarás posibilidades ilimitadas en tu flujo).
• Genere distribuciones complejas de los elementos para que sean equidistantes con el espacio alrededor o simplemente con el espacio entre ellos.
• Genere elementos “renegados” que fluyan de manera diferente (todos a la izquierda menos uno a la derecha, arriba/abajo… es su decisión).
• Y, lo que es más importante, ¡evita para siempre el truco del arreglo claro!

Entiendo que Flexbox puede ser difícil al principio. Creo que es más fácil aprender diez propiedades CSS no relacionadas que cinco con cierta interdependencia. Sin embargo, con sus habilidades actuales de CSS, y tal vez un poco de ayuda de este artículo, se lanzará a un nuevo universo de CSS.

Los fundamentos de Flexbox

Mostrar

display es una de las propiedades más básicas en CSS y es bastante importante en el contexto de Flexbox, ya que se usa para definir un contenedor flexible.

Hay dos posibles valores de contenedor flexible: flex e inline-flex .

La diferencia entre los dos es que una display: flex actúa como un elemento de bloque, mientras que una display: inline-flex actúa como un bloque en línea. Además, los elementos inline-flex crecen si no hay suficiente espacio para contener a los niños. Pero aparte de esas diferencias, el comportamiento de los dos sería el mismo.

Pruebe el código de muestra a continuación, reduzca el ancho de la ventana gráfica cuando inline-flex esté activo y... desplácese.

Consulte la propiedad Pen Flexbox @Toptal - Parent - `display` de DD (@Diegue) en CodePen.

 .wrapper { display: flex || inline-flex; }

Dirección de flexión

Ahora que ha visto la primera muestra, puede inferir que el comportamiento predeterminado es simplemente hacer una fila de los elementos. Pero hay más:

• fila (predeterminado): organiza los elementos de izquierda a derecha (pero si se establece RTL, sería al revés).
• fila-reversa: Invierte el orden de los elementos en una disposición de fila
• columna: organiza los elementos de arriba a abajo
• column-reverse: Invierte el orden de los elementos en una disposición de columna

Sugerencia: los valores de column y column-reverse se pueden usar para intercambiar los ejes, de modo que las propiedades que afectarían al eje horizontal afectarían al eje vertical en su lugar.

Consulte la propiedad Pen Flexbox @Toptal - Parent - `flex-direction` de DD (@Diegue) en CodePen.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

Envoltura flexible

Si revisa la primera muestra de código, se dará cuenta de que los elementos secundarios no se apilan de forma predeterminada dentro de un contenedor flexible. Aquí es donde entra en juego flex-wrap :

• nowrap (predeterminado): evita que los elementos en un contenedor flexible se envuelvan
• wrap: Envuelve los elementos según sea necesario en varias filas (o columnas, según flex-direction )
• wrap-reverse: Al igual que wrap , pero el número de filas (o columnas) crece en la dirección opuesta a medida que se envuelven los elementos

Consulte la propiedad Pen Flexbox @Toptal - Parent - `flex-wrap` de DD (@Diegue) en CodePen.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

Flujo flexible

Puede combinar las propiedades flex-direction y flex-wrap en una sola propiedad: flex-flow .

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

Justificar contenido

Esta propiedad se utiliza para controlar la alineación horizontal de los elementos secundarios:

• flex-start (predeterminado): los elementos se alinean a la izquierda (similar a los elementos en línea con text-align: left )
• flex-end: los elementos se alinean a la derecha (similar a los elementos en línea con text-align: right )
• center: los elementos están centrados (similar a los elementos en línea con text-align: center )
• espacio alrededor (donde comienza la magia): cada elemento se renderizará con la misma cantidad de espacio alrededor de cada elemento. Tenga en cuenta que el espacio entre dos elementos secundarios secuenciales será el doble del espacio entre los elementos más externos y los lados de la envoltura.
• espacio entre: Al igual space-around , excepto que los elementos estarán separados por la misma distancia y no habrá espacio cerca de los bordes de la envoltura.

Nota: Recuerde flex-direction , cuando se establece en column o column-reverse , intercambia el eje. Si se establece uno de estos, justify-content afectará la alineación vertical, no la horizontal.

Consulte la propiedad Pen Flexbox @Toptal - Parent - `justify-content` de DD (@Diegue) en CodePen.

Alinear elementos

Esta propiedad es similar a justify-content pero el contexto de sus efectos son las filas en lugar del propio contenedor:

• flex-start: los elementos se alinean verticalmente en la parte superior del envoltorio.
• Flex-end: los elementos se alinean verticalmente en la parte inferior de la envoltura.
• centro: los elementos se centran verticalmente dentro del envoltorio (por fin, una práctica segura para lograrlo).
• estirar (predeterminado): Obliga a los elementos a ocupar la altura completa (cuando se aplica a una fila) y el ancho completo (cuando se aplica a una columna) del envoltorio.
• línea base: Alinea verticalmente los elementos a sus líneas base reales.

Consulte la propiedad Pen Flexbox @Toptal - Parent - `align-items` de DD (@Diegue) en CodePen.

Alinear contenido

Esta propiedad es similar a justify-content y align-items pero funciona en el eje vertical y el contexto es el envoltorio completo (no la fila como en el ejemplo anterior). Para ver sus efectos, necesitará más de una fila:

• inicio flexible: las filas se alinean verticalmente hacia la parte superior (es decir, se apilan desde la parte superior de la envoltura).
• extremo flexible: las filas se alinean verticalmente hasta la parte inferior (es decir, se apilan desde la parte inferior de la envoltura).
• centro: las filas se centran en el envoltorio verticalmente.
• estirar (predeterminado): en general, esta propiedad estira los elementos para utilizar toda la altura vertical de la envoltura. Sin embargo, si ha establecido una altura específica de los elementos, se respetará esa altura y el espacio vertical restante (en esa fila, debajo de ese elemento) estará vacío.
• espacio alrededor: cada fila se renderizará con la misma cantidad de espacio alrededor de sí misma verticalmente (es decir, debajo y encima de sí misma). Tenga en cuenta que el espacio entre dos filas será, por lo tanto, el doble del espacio entre las filas superior e inferior y los bordes de la envoltura.
• espacio entre: Al igual space-around , excepto que los elementos estarán separados por la misma distancia y no habrá espacio en los bordes superior e inferior de la envoltura.

Consulte la propiedad Pen Flexbox @Toptal - Parent - `align-content` de DD (@Diegue) en CodePen.

Crecimiento flexible

Esta propiedad establece la proporción relativa del espacio disponible que debe utilizar el elemento. El valor debe ser un número entero, donde 0 es el valor predeterminado.

Digamos que tiene dos elementos diferentes en la misma envoltura flexible. Si ambos tienen un valor de flex-grow de 1, crecerán por igual para compartir el espacio disponible. Pero si uno tiene un valor de flex-grow de 1 y el otro un valor de flex-grow de 2, como se muestra en el siguiente ejemplo, este con un valor de flex-grow de 2 crecerá para ocupar el doble de espacio que el primero.

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; } 

Consulte la propiedad Pen Flexbox @Toptal - Children - `flex-grow` de DD (@Diegue) en CodePen.

Retracción flexible

Similar a flex-grow , esta propiedad establece si el elemento es "retractable" o no con un valor entero. Similar a flex-grow , flex-shrink especifica el factor de contracción de un elemento flexible.

Consulte la propiedad Pen Flexbox @Toptal - Children - `flex-shrink` de DD (@Diegue) en CodePen.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

base flexible

Esta propiedad se utiliza para definir el tamaño inicial de un elemento antes de que se distribuya el espacio disponible y los elementos se ajusten en consecuencia.

Sugerencia: flex-basis no es compatible con calc() y box-sizing: border-box en todos los navegadores, por lo que recomiendo usar width si necesita usar uno de estos (tenga en cuenta que también deberá configurar flex-basis: auto; ).

Consulte la propiedad Pen Flexbox @Toptal - Children - `flex-basis` de DD (@Diegue) en CodePen.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

Flexionar

Puede combinar las propiedades flex-grow , flex-shrink y flex-basis en una sola propiedad: flex de la siguiente manera:

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

Sugerencia: si planea usar flex , asegúrese de definir cada valor individual (incluso si desea usar valores predeterminados) porque es posible que algunos navegadores no los reconozcan (un error común está relacionado con no haber definido el valor flex-grow ).

Alinear uno mismo

Esta propiedad es similar a align-items pero el efecto se aplica individualmente a cada elemento. Los valores posibles son:

• flex-start: alinea verticalmente el elemento con la parte superior de la envoltura.
• flex-end: alinea verticalmente el elemento con la parte inferior del envoltorio.
• centro: centra verticalmente el elemento dentro del envoltorio (¡por fin una forma sencilla de lograrlo!).
• estirar (predeterminado): estira el elemento para ocupar toda la altura del envoltorio (cuando se aplica a una fila) o todo el ancho del envoltorio (cuando se aplica a una columna).
• línea base: alinea los elementos de acuerdo con sus líneas base reales.

Consulte la propiedad Pen Flexbox @Toptal - Children - `align-self` de DD (@Diegue) en CodePen.

Pedido

Una de las mejores cosas incluidas en Flexbox es la capacidad de reordenar elementos (usando la propiedad order ) sin necesidad de modificar el DOM o usar JavaScript. La forma en que funciona la propiedad order es muy simple. De la misma manera que z-index controla el orden en que se representan los elementos, el order controla el orden en que se colocan los elementos dentro del envoltorio; es decir, los elementos de menor valor de order (que, por cierto, incluso pueden ser negativos) se posicionan antes que los de mayor valor de order .

Consulte la propiedad Pen Flexbox @Toptal - Children - `order` de DD (@Diegue) en CodePen.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Reuniéndolo todo: usos de ejemplo de Flexbox

Cuando se trata de diseñar diseños, Flexbox libera un mundo de posibilidades. A continuación, puede encontrar algunos usos de ejemplo de las propiedades de Flexbox.

Componente de alineación vertical

Con Flexbox, puede alinear cualquier cosa verticalmente, incluidos varios elementos a la vez. Sin Flexbox, necesitaba utilizar técnicas de posicionamiento o table-ish que requerían que creáramos un niño para contener múltiples elementos. Pero con Flexbox, puede dejar atrás estas tediosas y frágiles técnicas, y simplemente definir algunas propiedades en el envoltorio y listo, independientemente de cuántas veces cambie el contenido dentro del contenedor o el tipo de cambio.

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ } 

Ver el Pen Flexbox @Toptal - Usos reales que podemos darle - Alineación vertical por DD (@Diegue) en CodePen.

Diseño mitad/mitad

Un diseño "mitad/mitad" es un diseño de altura completa con dos columnas, cada una con su contenido centrado verticalmente. Por lo general, se implementa "en la parte superior de la página" (es decir, antes de que los usuarios se hayan desplazado hacia abajo después de cargar la página).

Usando técnicas más tradicionales, puede crear este diseño con elementos flotantes (con un ancho del 50 % cada uno), borrando los elementos flotantes en el envoltorio ("clearfix" :before and :after , overflow: hidden , o un extravagante <div> con clear: both; al final). Sin embargo, es mucho trabajo y el resultado no es tan estable como lo que ofrece Flexbox.

En el siguiente fragmento de código, verá lo fácil que es establecer el diseño y también cómo los elementos secundarios se convierten también en contenedores Flexbox, ya que todo está alineado verticalmente también.

Envoltura exterior:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

Envolturas internas:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ } 

Vea el Pen Flexbox @Toptal - Usos reales que podemos dar - Sección de medio sangrado por DD (@Diegue) en CodePen.

Botones de barra de navegación de ancho completo

Una barra de navegación de ancho completo distribuye el espacio por igual en la misma fila de elementos de la barra de navegación, independientemente del número de elementos.

En el ejemplo a continuación, también hay algunos botones icónicos sin este comportamiento, lo que demuestra que puede combinar los dos de la forma que desee. Sin Flexbox, lograr este tipo de diseños habría requerido código JavaScript para calcular el espacio disponible y luego distribuirlo mediante programación dependiendo de qué botones abarcan y cuáles no.

Flexbox hace esto mucho más simple.

Propiedades del envoltorio:

 .navbar { display: flex; }

Expansión de propiedades secundarias:

 .navbar-item { flex-grow: 1; /* They will grow */ }

Propiedades secundarias que no se expanden:

 .navbar-other { flex-grow: 0; // They won't grow } 

Vea el Pen Flexbox @Toptal - Usos reales que podemos darle - Barra de navegación de botones de sangrado completo por DD (@Diegue) en CodePen.

Blurbs

¿Cuántas veces tuviste que implementar un conjunto de cuadros de información con íconos y texto en diferentes proyectos?

Esta distribución de elementos es principalmente útil en marketing digital, pero puede tener otros usos en el desarrollo de software. Con el poder de Flexbox, puede establecer una especie de cuadrícula y también alinear elementos, independientemente de cuántos haya.

Propiedades del envoltorio:

 .wrapper { display: flex; flex-wrap: wrap; }

Propiedades secundarias:

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

Para las ventanas gráficas de tabletas y dispositivos móviles, el ancho varía entre 50% y 100%.

Ver el Pen Flexbox @Toptal - Usos reales que podemos darle - Blurbs de DD (@Diegue) en CodePen.

Mejora de la compatibilidad entre navegadores

La sintaxis de Flexbox ha cambiado varias veces en diferentes versiones de navegador. Esto puede ser un problema al implementar un diseño con Flexbox y tratar de admitir navegadores web más antiguos, especialmente versiones anteriores de Internet Explorer.

Afortunadamente, en Flexbugs se enumeran muchas técnicas y soluciones para lograr que su código funcione en la más amplia gama de navegadores web, que es un gran recurso. Si sigue la información de ese sitio, obtendrá resultados mejores y más consistentes en diferentes navegadores web.

Las tareas de prefijo son particularmente útiles en este sentido. Para automatizar el prefijo de las reglas CSS, puede elegir una de las siguientes herramientas:

Rubí:

• Carriles autoprefijadores
• Autoprefijador intermediario

Nodo.js:

• PostCSS Autoprefixer
• Autoprefijador Grunt
• Autoprefijador Gulp

Comience a crear diseños inteligentes

Flexbox es una gran herramienta para acelerar, pulir y escalar nuestro trabajo. El límite está solo en la imaginación del desarrollador.

Si necesita alguna ayuda visual para planificar su próximo diseño, puede probar este patio de recreo ordenado:

Vea Pen Flexbox @Toptal - Área de juegos Flexbox de DD (@Diegue) en CodePen.

Abrirlo en una nueva ventana.

Con la adopción cada vez mayor de los navegadores web modernos por parte de la mayoría de los usuarios, el uso de Flexbox le permitirá crear diseños asombrosos fácilmente sin la necesidad de profundizar en el código JavaScript desordenado o crear CSS confuso.