Hola, les saluda Luis y en esta ocasión les traigo un artículo.
Está sentado en su trabajo y necesita ofrecer una función en la que todos los elementos deben distribuirse de manera uniforme. Entonces sabe que la forma más fácil de hacerlo es establecer la displaypropiedad de su contenedor en flex. Y luego te detienes. Vaya a Google y busque cómo alinear los elementos tanto horizontal como verticalmente.
Si esto te pasa cada vez que tienes que usar flexbox, bienvenido al club. En este tutorial, intentaré que recuerdes cómo usar flexbox a fondo con confianza de una vez por todas. También intenté proporcionar ejemplos interactivos para algunos de los elementos cuando fue apropiado.
Antes de sumergirnos en ejemplos, hablemos de la terminología del diseño flexible.
Índice
La terminología de Flexbox
Cuando hablamos de flexbox, estamos hablando de un módulo de diseño, en lugar de una propiedad única, como solemos hacer en el contexto de CSS. Esto también significa que tenemos más de una propiedad relacionada con flexbox. Se pueden configurar en:
- El elemento contenedor, llamado contenedor flexible .
- Los elementos secundarios , llamados elementos flexibles .
Como puede ver en la imagen de arriba, también tenemos un par de nombres más. Puede distribuir elementos en dos direcciones: horizontal o verticalmente. En el contexto de flexbox, estos se denominan eje principal y transversal respectivamente.
También tiene puntos de inicio y final para el eje principal y transversal. También tenemos tamaños que se refieren al ancho y alto de los elementos flexibles. Y eso es todo lo que necesita saber antes de comenzar a trabajar con flexbox. Ahora veamos primero cómo puede personalizar su contenedor, luego pasaremos a los elementos secundarios.
Personalización del contenedor flexible
El contenedor flexible tiene seis propiedades diferentes que debe conocer.
Son:
flex-directionflex-wrapflex-flowjustify-contentalign-contentalign-items
Cada una de estas propiedades define cómo se comportan los elementos dentro del contenedor flexible. Echemos un vistazo a cada uno con más detalle.
Dirección de flexión
Aquí es donde puede definir cómo desea que se coloquen sus elementos flexibles dentro del contenedor. Puede hacer que se muestren en filas, columnas y en orden inverso, tanto para columnas como para filas. Esto está configurado rowde forma predeterminada.
Tenga en cuenta que también puede cambiar la dirección de los elementos agregando un direction atributo. Por ejemplo:
Por tener flex-direction ajustado a row-reverse y también tener direction ajustado a rtl (de derecha a izquierda), esencialmente niega el efecto de flex-direction y terminar con el mismo efecto que tendrías con flex-direction: row.
Envoltura flexible
La propiedad flex-wrap le dice al contenedor si debe envolver los artículos o no. De forma predeterminada, se establece en nowrap, lo que significa que si no hay suficiente espacio para los niños, los elementos desbordarán su contenedor. Para solucionarlo, simplemente configúrelo en wrap. También puede invertir el orden de los niños, utilizando el wrap-reverse valor.
Flujo flexible
El flujo flexible es solo una forma abreviada de usar ambos flex-direction y flex-wrap juntos. El primer parámetro que toma es para flex-direction, el segundo es para flex-wrap.
Justificar el contenido
Y ahora hemos llegado a personalizar cómo se deben alinear los elementos flexibles a lo largo del eje principal del contenedor. Puede colocarlos al principio, al centro o al final de su contenedor. También tiene la capacidad de distribuirlos uniformemente con espacio entre ellos o alrededor.
Alinear contenido
Mientras justify-content conjuntos, cómo se deben alinear los elementos flexibles en el eje principal, align-content establece cómo deben alinearse en el eje transversal. Como para justify-content esto también acepta valores para start, centero end, junto con algunos otros valores.
Alinear elementos
Por último, tienes align-items. Puede usarlo para configurar el align-self en cada elemento secundario del contenedor flexible y controlarlo como grupo.
Personalización de los elementos flexibles
Los elementos flexibles también tienen seis propiedades diferentes que debe conocer.
Son:
flex-basisflex-growflex-shrinkflexalign-selforder
Estas propiedades definen cómo deben comportarse los elementos secundarios individuales dentro del contenedor flexible. Echemos un vistazo a ellos con más detalle.
Base flexible
Puede utilizar flex-basispara establecer el tamaño principal de un elemento flexible. Es como especificar un widthpara el elemento.
Flex crecer
Esta propiedad establece cuánto espacio debe ocupar el elemento que recibe el valor.
Puede pensar flex-growen valores porcentuales. En el ejemplo anterior, tiene tres columnas, cada una con un flex-grow1. Esto significa que cada niño ocupa una unidad de espacio. Como tenemos 3 elementos, esto significa que cada uno ocupará el 33%. Si establece flex-growen 2 para uno de ellos, significará que el elemento debe tener el doble del tamaño de los otros elementos.
Contracción flexible
La flex-shrinkpropiedad define cuánto debe encogerse un elemento flexible en relación con otros elementos si no hay suficiente espacio dentro del contenedor. De forma predeterminada, se establece en 1.
Flexionar
Al igual que para el contenedor flexible, también tiene una abreviatura para los artículos flexibles. Esto establece las siguientes propiedades para un elemento secundario, en el siguiente orden:
flex-growflex-shrinkflex-basis
Alinearse
Y, por supuesto, también tiene propiedades para personalizar la alineación. Esta propiedad establece cómo se deben alinear los elementos individuales dentro de su contenedor flexible. El valor predeterminado se establece en auto.
Orden
Por último, tiene el orderatributo, utilizado para ordenar los artículos flexibles. Los elementos se clasifican en orden ascendente. Primero por su ordervalor, luego por el que estableciste a través de tu CSS. Esto significa que si tiene tres elementos y establece que la orderpropiedad también sea 3 para el último elemento. Se colocará después del último artículo.
Casos de uso comunes
Ahora que sabe todo lo que debe sobre las propiedades de flexbox, veamos también algunos casos de uso comunes en los que puede usarlo para resolver fácilmente problemas comunes en CSS.
Elementos del centro muerto
Uno de los usos más comunes de flexbox es simplemente centrar un elemento. Puede hacer esto configurando ambos justify-contenty align-itemsa center.
Columnas de igual altura
Otro caso de uso común es crear columnas de igual altura, independientemente del contenido dentro de ellas. Simplemente configure flexen 1 para cada elemento flexible en un diseño flexible.
Esto hará que el resto de las columnas se adapten al tamaño de la columna más alta, como se ve en el siguiente ejemplo.
Orden diferente según los tamaños de pantalla
Por último, flexbox puede ser muy útil si tienes que reordenar el contenido de tu página según el tamaño de la pantalla. Por ejemplo, si tiene un contenido principal y una barra lateral en el lado derecho para pantallas del tamaño de un escritorio, este diseño empujaría la barra lateral debajo del contenido principal. Si desea que esté encima, puede reordenarlos usando flexbox.
Resumen
Y ahora ya sabes todo lo que necesitas saber sobre flexbox para empezar a usarlo. Si ha llegado hasta aquí, ahora debería tener una comprensión bastante sólida de cómo funciona flexbox y cómo puede resolver problemas comunes con él.
¿Tiene ideas adicionales para flexbox? ¡Háganos saber en los comentarios a continuación!
Gracias por leer.
Añadir comentario