Esta completa hoja de trucos CSS flexbox cubrirá todo lo que necesita saber para comenzar a usar flexbox en sus proyectos web.
El diseño CSS flexbox le permite formatear HTML fácilmente. Flexbox simplifica la alineación de elementos vertical y horizontalmente mediante filas y columnas. Los elementos se "flexionarán" a diferentes tamaños para llenar el espacio. Facilita el diseño receptivo.
CSS flexbox es ideal para el diseño general de su sitio web o aplicación. Es fácil de aprender, es compatible con todos los navegadores modernos y no lleva tanto tiempo comprender los conceptos básicos. Al final de esta guía, estará listo para comenzar a usar flexbox en sus proyectos web.
El artículo incluye útiles gifs animados de Scott Domes que harán que flexbox sea aún más fácil de entender y visualizar.
Todas las propiedades de CSS Flexbox
Aquí hay una lista de todas las propiedades de CSS flexbox que se pueden usar para colocar elementos en CSS. A continuación, verá cómo funcionan.
CSS que se puede aplicar al contenedor
display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: || justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;CSS que se puede aplicar a elementos / elementos en el contenedor
order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis: | auto; /* default auto */ flex: none | [ ? || ] align-self: auto | flex-start | flex-end | center | baseline | stretch;Terminología
Antes de aprender qué hacen las propiedades de flexbox, es importante comprender la terminología asociada. Aquí están las definiciones de los términos clave de flexbox, tomadas de la especificación oficial de W3C para flexbox.
- eje principal : el eje principal de un contenedor flexible es el eje principal a lo largo del cual se colocan los elementos flexibles. La dirección se basa en la propiedad flex-direction.
- inicio principal | extremo principal :Los artículos flexibles se colocan dentro del contenedor comenzando en el lado de inicio principal y yendo hacia el lado del extremo principal.
- tamaño principal : el ancho o alto de un contenedor flexible o elemento flexible, el que esté en la dimensión principal, es el tamaño principal de esa caja. Su propiedad de tamaño principal es, por tanto, su propiedad de ancho o alto, cualquiera que sea la dimensión principal.
- eje transversal : El eje perpendicular al eje principal se denomina eje transversal. Su dirección depende de la dirección del eje principal.
- inicio cruzado | Cross-end : Las líneas flexibles se llenan con artículos y se colocan en el contenedor comenzando en el lado de inicio cruzado del contenedor flexible y yendo hacia el lado del extremo transversal.
- tamaño cruzado : el ancho o alto de un artículo flexible, cualquiera que esté en la dimensión cruzada, es el tamaño cruzado del artículo. La propiedad de tamaño cruzado es cualquiera de 'ancho' o 'alto' que esté en la dimensión cruzada.
CSS Display Flex
display: flex Esto le dice a su navegador: "Quiero usar flexbox con este contenedor, por favor".
Un divelemento predeterminado es display:block. Un elemento con esta configuración de visualización ocupa todo el ancho de la línea en la que se encuentra. Aquí hay un ejemplo de cuatro divs de colores en un div principal con la configuración de visualización predeterminada:
Para usar flexbox en una sección de su página, primero convierta el contenedor principal en un contenedor flexible agregando display: flex;al CSS del contenedor principal.
Esto inicializará este contenedor como un contenedor flexible y aplicará algunas propiedades flexibles predeterminadas.
Dirección de flexión
flex-directionle permite controlar cómo se muestran los elementos en el contenedor. ¿Los quieres de izquierda a derecha, de derecha a izquierda, de arriba a abajo o de abajo hacia arriba? Puede hacer todo esto fácilmente configurando el flex-directiondel contenedor.
La disposición predeterminada después de la solicitud display: flexes que los elementos se organicen a lo largo del eje principal de izquierda a derecha. La siguiente animación muestra lo que sucede cuando flex-direction: columnse agrega al elemento contenedor.
También puede establecer flex-directionen row-reversey column-reverse.
Justificar contenido
justify-contentes una propiedad para alinear elementos en el contenedor a lo largo del eje principal (ver diagrama de terminología arriba). Esto cambia dependiendo de cómo se muestre el contenido. Nos permite llenar cualquier espacio vacío en filas y definir cómo queremos 'justificarlo'.
Aquí están nuestros las opciones más comunes que se utilizan para justificar contenido: flex-start | flex-end | center | space-between | space-around.
Así es como se ven las diferentes opciones:
space-betweendistribuye elementos de modo que el primer elemento esté alineado con el inicio y el último con el final. space-aroundes similar pero los artículos tienen un espacio de la mitad del tamaño en cada extremo.
Elementos de alineación flexible
align-itemsnos permite alinear elementos a lo largo del eje transversal (ver diagrama de terminología arriba). Esto permite que el contenido se coloque de muchas formas diferentes mediante la justificación del contenido y la alineación de elementos.
Estas son las opciones más comunes que se utilizan para alinear elementos: flex-start | flex-end | center | baseline | stretch
Para stretchque funcione como esperaría, la altura de los elementos debe establecerse en autolugar de una altura específica.
Esta animación muestra cómo se ven las opciones:
Ahora usaremos ambos justify-contenty align-items. Esto mostrará la diferencia entre los ejes principales y los ejes transversales.
Alinear uno mismo
align-self le permite ajustar la alineación de un solo elemento.
Tiene todas las mismas propiedades de align-items.
En la siguiente animación, el div padre tiene CSS align-items: centery flex-direction: row. Los dos primeros cuadrados pasan por diferentes align-selfvalores.
Envoltura flexible
Flexbox por defecto intentará encajar todos los elementos en una fila. Sin embargo, puede cambiar esto con la flex-wrappropiedad. Hay tres valores que puede usar para determinar cuándo los elementos van a otra fila.
El valor predeterminado es flex-wrap: nowrap. Esto hará que todo quede en una fila de izquierda a derecha.
flex-wrap: wrap permitirá que los elementos pasen a la siguiente fila si no hay suficiente espacio en la primera fila. Los elementos se mostrarán de izquierda a derecha.
flex-wrap: wrap-reverse también permite que los elementos pasen a la siguiente fila, pero esta vez los elementos se muestran de derecha a izquierda.
Flujo flexible
flex-flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap. Here is an example: flex-flow: column wrap;
Align Content
align-content is used for aligning items with multiple lines. It is for aligning on the cross axis and will have no effect on content that is one line.
Here are the options: align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Vertically Centering with Flexbox
If you want to vertically center all the contents inside a parent element, use align-items. Here is the code to use:
.parent { display: flex; align-items: center; }Games and Apps
If you want to practice using flexbox, try out these games and apps that will help you master flexbox.
- Flexbox Defense is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.
- Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.
- Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
- Flexbox Patters is a website that shows off a bunch of Flexbox examples.
Conclusion
We've covered all the most common CSS flexbox properties. The next step is practice! Try making a few projects using flexbox so you can get used to how it works.