Tutorial de CSS Flexbox para principiantes: qué es y cómo usarlo

ComoDiseño webA medida que ha avanzado el tiempo, han surgido diferentes formas estándar de organizar los elementos en un sitio web. CSS Flexbox es una forma relativamente nueva pero poderosa de crear diseños y algo con lo que todo desarrollador y diseñador web debería estar familiarizado.

Si aún no sabe cómo usarlo, este tutorial detallado de flexbox tiene como objetivo cambiar eso. La publicación a continuación hablará sobre qué es flexbox, por qué es importante y su concepto subyacente. Después de eso, repasaremos en detalle las propiedades y los valores CSS asociados con flexbox y finalizaremos con un ejemplo de un caso de uso.

Muy bien, tenemos mucho que cubrir y será un poco técnico, así que ponte tus gafas CSS y comencemos.

¿Qué es CSS Flexbox?

Flexbox significacaja flexibleEs un módulo de diseño para CSS cuyo objetivo es brindarle una forma eficiente de organizar y dimensionar elementos del sitio web para crear diseños altamente adaptables.

Por supuesto, la tecnología para colocar componentes web en una página no es nueva. Desde el comienzo de Internet,diseñadores webHan utilizado diferentes formas de colocar imágenes, texto y otros contenidos donde querían que estuvieran. Sin embargo, no eran adecuados paraDiseño responsivo(tablas), nunca fueron pensadas como una herramienta de diseño en primer lugar ( float), no permitían definir alturas iguales para los elementos ( inline-block) o tenían otros problemas.

Entonces, aunque los diseñadores y desarrolladores se las arreglaron durante mucho tiempo, todavía había un montón de patrones de diseño que eran imposibles o necesarios.JavaScriptEjemplos comunes son el centrado vertical y las columnas iguales, dos de los santos griales del diseño web.

¿En qué se diferencia Flexbox?

La forma en que funciona flexbox es bastante simple en la superficie: tienes un contenedor (contenedor flexible) con niños (cualquier elemento contenido dentro, llamadoartículos flexibles), que se colocan a lo largolíneas flexibles.

Las líneas y los elementos se pueden manipular en cuanto a diseño, tamaño, espaciado y más, tanto en el eje vertical como en el horizontal, utilizando una multitud de operadores. Esto le permite aprovechar al máximo el espacio disponible y permite que los elementos se organicen automáticamente de acuerdo con él.

Si esto es difícil de visualizar, aquí hay un esquema (Cortesía de W3.org) para que quede más claro:

¿Aún no estás del todo seguro? No te culpo. Hablemos de ello con más detalle.

El concepto subyacente

Como se mencionó, flexbox es un módulo CSS completo, no una propiedad individual. Por lo tanto, viene con una gran cantidad de operadores propios, algunos para el contenedor principal y otros para sus secundarios.

Para entender cómo funcionan, es importante que conozcas los conceptos y la terminología de flexbox, que se muestran en la imagen de arriba:

• main axis— Este es el eje en el que se disponen los elementos. Importante: puede ser tanto vertical como horizontal, según la flex-directionpropiedad.
• main-start, main-end— Representan el punto de inicio y el punto final donde se organizan los elementos.
• main size— Esto indica el ancho o la altura de los elementos flexibles, dependiendo de la dirección del eje principal.
• cross axis — El eje perpendicular al eje principal. Su dirección también depende de cómo se defina el eje principal.
• cross-start, cross-end— Inicio y dirección en que se rellenarán las líneas flexibles.
• cross size— Indica la otra dimensión de los elementos flexibles que no está definida por main size.
• writing-mode— Permite cambiar la dirección de escritura de izquierda a derecha, de derecha a izquierda o incluso a vertical. Es un proyecto en desarrollo que cuenta con poca o ninguna compatibilidad con navegadores, pero es importante conocer algunas de las propiedades que se describen a continuación.

Como puede ver, gran parte de flexbox es bastante abstracta y no está absolutamente definida. En consecuencia, gran parte del CSS que aparece a continuación depende de su configuración.

Cuándo utilizar Flexbox

Si bien puedes usar flexbox para crear páginas web completas, ese no es el caso de uso recomendado. Para diseños más grandes, consideraRed(Hablaremos más sobre esto en otro momento). Flexbox, por otro lado, es más apropiado para diseños y aplicaciones de pequeña escala, como:

• menús de navegación
• diseños de tarjetas
• elementos multimedia
• formularios web

Compatibilidad con navegadores

Flexbox se propuso por primera vez a principios de la década pasada y el W3C recomendó su adopción Actualizado. Desde entonces, los navegadores han comenzado a soportarlo y, a estas alturas, todos los navegadores modernos pueden manejar Flexbox.

Propiedades CSS de Flexbox disponibles

Bien, ahora que hemos aclarado la teoría, veamos qué puede hacer flexbox. Con las propiedades que aparecen a continuación, puedes manipular tu diseño asignando atributos al contenedor y también a los elementos individualmente. Comenzaremos con el primero y luego pasaremos al segundo.

flexión de dirección

Esto define el eje principal y, en consecuencia, la dirección en la que se colocan los elementos flexibles. Esto también le permite cambiar el orden de los elementos, lo que antes requería modificar el HTML subyacente.

Las propiedades disponibles son:

• row— El valor predeterminado. Organiza los elementos flexibles de izquierda a derecha, a menos que se encuentre en un entorno de derecha a izquierda debido a writing mode.
• row-reverse— Organiza los elementos horizontalmente pero en orden inverso.
• column— Lo mismo que rowpero verticalmente, con los elementos dispuestos de arriba a abajo.
• column-reverse—Probablemente puedas adivinar esto. column-reverseMuestra los elementos de abajo a arriba.

envoltura flexible

El comportamiento predeterminado de los elementos dentro de un contenedor flexible es organizarse en una fila. flex-wraple permite cambiar eso.

• nowrap— El valor predeterminado que coloca todos los elementos en una línea.
• wrap—Si una sola línea no es suficiente, con esto, los elementos se organizarán en varias líneas de arriba a abajo.
• wrap-reverse— Igual que wrappero con los artículos ordenados de abajo a arriba.

flujo flexible

Esta es una abreviatura de flex-directiony flex-wrap. Uso:

.flex-container {  display: flex;  flex-flow: row wrap;}

La flex-flowpropiedad permite definir ambos ejes principales del contenedor. El valor predeterminado es row nowrap, se aplican todos los valores posibles de las dos propiedades anteriores.

justificar-contenido

La siguiente propiedad CSS de flexbox define la alineación del elemento en el eje principal. Decide qué sucede con el espacio libre disponible y tiene cierto control sobre la alineación cuando los elementos se hacen más anchos que su contenedor. Estos son los valores que puede elegir:

• flex-start— Valor predeterminado. Los elementos se alinean hacia el frente de flex-direction.
• flex-end— Coloca elementos al final de flex-direction.
• start— Define el comienzo de writing-modecomo el punto de partida.
• end— Mueve elementos hacia el final de writing-mode.
• left— Alinea los elementos flexibles hacia el borde izquierdo del contenedor. Si esto no tiene sentido debido a flex-direction, se comporta como start.
• right—Lo mismo leftpero para el borde derecho.
• center— Los elementos se centran horizontalmente.
• space-between— Distribuye los elementos de manera uniforme dentro del contenedor. El primero hacia el inicio, el último hacia el final con un espacio uniforme entre ellos (de ahí el nombre).
• space-around— Los elementos se colocan de manera uniforme con el mismo espacio a su alrededor. Tenga en cuenta que se comporta como marginsi paddingtuviera el doble de espacio entre los elementos que hacia los bordes.
• space-evenly— Los artículos se ubican de manera uniforme dentro del contenedor, pero el espacio entre cada uno y hacia los bordes del contenedor es uniforme.

Tenga en cuenta que la compatibilidad del navegador con estos valores es un poco irregular. Por ejemplo, space-betweenno es compatible con algunas versiones de Edge y start/ end/ left/ rightaún no está disponible en Chrome. Los valores más seguros son flex-start, flex-end, y center.

alinear elementos

Esta propiedad controla cómo se alinean los elementos en el eje transversal. Es el equivalente de lo que justify-contentes para main axis. Estos son los valores disponibles:

• stretch— Valor predeterminado que estira los elementos para llenar el contenedor.
• flex-start, start, self-start— Alinea los elementos flexibles al inicio del eje transversal starty self-startse adhieren a flex-directiony writing-moderespectivamente.
• flex-end, end, self-end— Lo mismo que el anterior pero colocando los elementos al final del eje transversal.
• center— Los elementos residen en el centro del eje transversal.
• baseline— Alinea los elementos flexibles a lo largo de sus líneas base.

Aquí también es importante tener en cuenta la compatibilidad del navegador.

alinear contenido

Esta propiedad es responsable de controlar las líneas flexibles si hay espacio adicional disponible en el eje transversal. Es similar a justify-content. Necesita más de una fila de elementos para que los valores siguientes surtan efecto.

• stretch— Valor predeterminado. Las líneas se estiran para ocupar todo el espacio disponible.
• flex-start, start— Los elementos se alinean al comienzo del contenedor. flex-startse adhiere a flex-direction, starta writing-mode.
• flex-end, end— El mismo trato flex-starty startsólo que los artículos se mueven hasta el final del contenedor.
• center— Centra los elementos en el eje transversal dentro del contenedor.
• space-between— Distribuye uniformemente las líneas flexibles dentro del contenedor colocando la primera fila al inicio y la última al final.
• space-around— Distribución uniforme con espacio uniforme alrededor de cada línea.
• space-evenly— Distribución uniforme con espacio igual alrededor de los artículos.

orden

A partir de esta, las demás reglas se aplican a los elementos flexibles en lugar del contenedor. La orderpropiedad controla en qué orden aparecen los elementos dentro de su contenedor.

Por ejemplo, el valor predeterminado para todos los elementos flexibles es order: 0;. Si desea mover un elemento en particular al principio o al final de la línea, puede hacerlo asignándole un valor como 1o -1. Esto también funciona en los límites de filas o columnas, a diferencia de row-reverseo , column-reverseque invertirá el orden por línea individualmente.

Aquí está el código para la imagen de ejemplo de arriba:

divdiv1/divdiv2/divdiv3/divdiv4/div/div

cultivo flexible

Controla la capacidad de los elementos flexibles para crecer dentro del contenedor según sea necesario. flex-growtoma un número que describe una proporción.

Ejemplo: si todos los elementos están configurados como , flex-grow: 1;se distribuirán de manera uniforme dentro de su contenedor. Sin embargo, si uno está configurado como 1y otro como 3, este último intentará ocupar tres cuartas partes del espacio disponible.

Flexibilidad-encogimiento

Similar a flex-grow, pero define la capacidad de los artículos de encogerse en relación con otros artículos. Cuanto mayor sea el número, más se reducirá el tamaño de un artículo y viceversa.

base flexible

Define el tamaño predeterminado del elemento (alto o ancho según el eje). Puede ser un valor relativo como 15%o absoluto como 30px. Así es como logré lo anterior:

divdiv1/divdiv2/divdiv3/divdiv4/div/div

Otros valores posibles:

• auto— Este es el valor predeterminado.
• content— Establece el tamaño según el contenido del elemento. Aún no tiene un buen soporte, al igual que max-content, min-content, y fit-contentque también existen.

doblar

Forma abreviada de flex-grow, flex-shrink, y flex-basisjuntos. Solo el primer parámetro es obligatorio y el valor predeterminado es 0 1 auto.

divdiv1/divdiv2/divdiv3/divdiv4/div/div

A menudo tiene sentido utilizar esta propiedad en lugar de flex-grow, flex-shrinko flex-basisindividualmente, ya que aplica valores razonables a los operadores que no está utilizando.

flexTambién puede tomar initial(se adhiere al tamaño definido si lo hay), auto(lo hace completamente flexible) y none(hace que todos los elementos sean inflexibles). Puede usar esto, por ejemplo, para establecer algunos elementos con un ancho fijo (a través de initial) mientras que otros se ajustan al espacio disponible.

alinearse

Esto le permite anular la alineación de elementos individuales. Tiene los mismos valores que align-items.

Ejemplo de Flexbox: columnas con la misma altura

Como último paso, repasaremos un ejemplo de cómo utilizar lo anterior. Vamos a crear un diseño de flexbox con columnas de igual altura. Puedes crearlo con HTML de la siguiente manera:

divdivh2Column 1/h2pLorem ipsum dolor sit amet, consectetur adipiscing elit./p/divdivh2Column 2/h2pLorem ipsum dolor sit amet, consectetur adipiscing elit.Morbi interdum et ex a efficitur.Nam consequat elementum tellus,at varius lectus condimentum vulputate. /p/divdivh2Column 3/h2pLorem ipsum dolor sit amet, consectetur adipiscing elit.Morbi interdum et ex a efficitur./p/div/div

Después de eso, agrégale este marcado CSS:

.flex-container {background-color: #aa278c;border-radius: 10px;display: flex;margin-bottom: 10px;}.flex-container  div {background-color: #F7941F;border: 1px solid;border-radius: 10px;flex: 1;font-size:Actualizado;font-family: tahoma;line-height: 40px;margin: 10px;padding: 16px;width: 60px;}.flex-container  div h2 {text-align:center;}

Y aquí está el resultado:

¿Por qué funciona esto? Bueno, las únicas partes importantes son que el contenedor flexible está configurado como display: flex;, mientras que sus elementos secundarios toman flex: 1;. El resto del marcado es solo para dar estilo.

Como recordarás, al hacer esto se establecen flex-growtanto flex-shrinkto como 1to flex-basis. autoComo consecuencia, todos los elementos ocupan la misma cantidad de espacio dentro del contenedor y su tamaño inicial se adapta automáticamente a las dimensiones disponibles. El resultado: columnas sencillas de igual altura.

Flexbox en pocas palabras

En el diseño web, existen muchas formas diferentes de crear diseños y organizar elementos. Flexbox es una de las que se ha vuelto cada vez más común. El módulo CSS ofrece muchos beneficios, especialmente para diseños dinámicos, elementos de página más pequeños y diseño para dispositivos móviles.

Más arriba, hemos repasado qué es exactamente Flexbox, sus capacidades y cómo utilizarlo. La próxima vez que desee utilizar floato inline-block, tómese un segundo para pensar si Flexbox podría ser la mejor solución.

¿Has utilizado CSS flexbox antes? ¿Qué es lo que más te gusta y lo que menos te gusta? ¡Cuéntanoslo en la sección de comentarios a continuación!