176

Flexbox explicado con manzanitas 🍎🍏

35805Puntos

hace un año

¿Qué es Flex?

Flex es uno de los nuevos valores HTML5 para propiedad CSS display, que nos permite maquinar nuestras páginas web de una manera mucho más fácil de lo que se hacía con la forma tradicional, en la que utilizábamos propiedades como float o position, entre otras.

¿Por qué Flex?

Se llama Flex porque tenemos un contenedor, llamado contenedor Flex, que es el elemento que contiene la propiedad display: flex.

Desde ese contenedor vamos a poder especificar la alineación de los elementos que hay dentro, el tamaño de los elementos que contienen y distribuir el espacio restante que hay entre los elementos del contenedor Flex, y todo esto en una sola dirección, ya sea una horizontal o vertical. Es decir, podemos distribuir los elementos que contiene la etiqueta sin poner nada dentro de estos elementos.

¿Qué podemos hacer con Flexbox?

  • Diseños flexibles con menos código.
  • Alinear los elementos de manera vertical y horizontal.
  • Reordenar contenido sin tocar el HTML.

Conceptos Básicos

Los elementos básicos de Flexbox son:
1.png

  1. Contenedor. Existe un elemento padre que es el contenedor, ya que tendrá en su interior cada uno de los ítems flexibles y adaptables.
    • Eje principal. Los contenedores flexibles tendrán una orientación principal específica. Por defecto es horizontal con el valor row.
    • Eje secundario. De la misma forma que el eje principal, solo que esta orientación será perpendicular a la principal. Si la principal es horizontal, la secundaría será vertical con el valor column, y viceversa.
  2. ítem. Cada uno de los hijos flexibles que tendrá el contenedor en su interior.

Viendo esto en código sería de la siguiente forma.

<!-- Contenedor --><section><!-- ítems --><article>Contenido 1</article><article>Contenido 2</article></section>

Para volver a dicho contenedor un contenedor flexible habrá que modificar su valor display por defecto.

section {
    display: flex;
}

Dirección de los Ejes

Existen dos propiedades principales para manipular la dirección y comportamiento de los ítems a lo largo del eje principal del contenedor que son flex-direction y flex-wrap.

Mediante la primera propiedad podemos modificar la dirección del eje principal del contenedor para que se oriente en horizontal (por defecto) o en vertical.
2.png

section {
    display: flex;
		/* Puede tomar los valores de row, row-reverse, column y column-reverse */flex-direction: column;
}

Mientras que con la segunda podemos especificar el comportamiento del contenedor respecto a evitar que se desborde o permitir que lo haga.

3.png
section {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
}

Atajo

Estas propiedades tienen su propiedad atajo que es flex-flow, con la que podemos resumir los valores.

section {
		display: flex;
		flex-flow: row wrap;
}

Propiedades de Alineación

Flexbox tiene propiedades para disponer de los ítems dependiendo de como sea nuestro diseño. A continuación describiremos cada una de estas propiedades.

Alineación al eje principal

La propiedad que nos permite alinear los ítems al eje principal es justify-content y sus valores, así como la visualización de cómo se aplican estos valores a los ítems son los siguientes.

4.png
Ejemplo de código para centrar todos los ítems en el eje horizontal.

section {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
}

Alineación al eje secundario

De igual forma que para el eje principal tenemos una propiedad que nos permite alinear los ítems en el eje secundario y es align-items y sus valores, así como la visualización de cómo se aplican estos valores a los ítems son los siguientes.
5.png

Ejemplo de código para poner todos los ítems al inicio del eje secundario.

section {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
}

La propiedad align-items alinea a todos los hijos de igual forma y se aplica en el contenedor, también tenemos una propiedad para alinear en el eje secundario a cada hijo de forma individual. Esta propiedad es align-self y se debe aplicar en cada hijo específico.

article {
		background-color: #555;
		align-self: center;
}

En otras palabras nos permite sobreescribir de forma individual el align del padre.

Propiedades de los Hijos

A excepción de la propiedad align-self, todas las propiedades anteriores se aplican sobre el elemento contenedor. Las siguientes propiedades, sin embargo, se aplican sobre los ítems hijos.

Factor de crecimiento

El factor de crecimiento de los ítems o flex-grow nos permite indicar el tamaño que crecerá un ítem en relación con sus demás hermanos, esto siempre y cuando haya espacio disponible en el contenedor para crecer. Su valor por defecto es 0.

article {
		background-color: #555;
		align-self: center;
		flex-grow: 1;
}

Factor de decrecimiento

El factor de decrecimiento o flex-shrink como su nombre lo indica es lo opuesto a la propiedad anterior. De esta forma, los ítems que tengan un valor numérico más grande, serán más pequeños, mientras que los que tengan un valor numérico más pequeño serán más grandes. Su valor por defecto es 1.

article {
		background-color: #555;
		align-self: center;
		flex-grow: 1;
		flex-shrink: 2;
}

Tamaño por defecto

La propiedad flex-basis, define el tamaño base que tendrán los ítems antes de aplicarle la distribución de espacio. Su valor por defecto es auto.

article {
		background-color: #555;
		align-self: center;
		flex-grow: 1;
		flex-shrink: 2;
		flex-basis: 120px;
}

Atajo

Estas tres propiedades tiene su propio atajo llamado flex. Funciona de la siguiente forma:

article {
		background-color: #555;
		align-self: center;
		flex: 12120px;
}

Huecos

Flexbox también tiene propiedades para manejar el espaciado existente entre sus ítems dentro del elemento contenedor, estas propiedades son row-gap y column-gap, son alternativas al uso de padding o margin en los elementos hijos.

selector {
		row-gap: 5px;
		column-gap: 10px;
}

❗️Hay que tener en cuenta que solo una de las dos propiedades tendrá efecto, dependiendo de si la propiedad flex-direction está establecida en column o en row. Eso sí, es posible usar ambas si tenemos la propiedad flex-wrap definida a wrap y, por lo tanto, disponemos de multicolumnas flexbox.

Atajo

Estas dos propiedades igual que otras dentro de flexbox tienen su propio atajo llamado gap. Funciona de la siguiente forma.

article {
		background-color: #555;
		/* gap: row column */gap: 5px10px;
		/* 1 parámetro: usa el mismo para ambos */gap: 5px;
}

❗️Tener en cuenta que estas propiedades de huecos en flexbox, aún no tienen un soporte demasiado extendido entre navegadores. Revisar en Can I Use.

Orden de los ítems

Las propiedades más interesantes, es order, que modificar y establece el orden de los ítems según una secuencia numérica. Por defecto, todos los ítems flex tienen un order: 0 implícito, aunque no se especifique. Si indicamos uno, se irán recolocando los ítems según su número, colocando antes los ítems con número más pequeño (incluso valores negativos) y después los ítems con números más altos.

article {
		background-color: #555;
		order: 2;
}

Este artículo también lo puede encontrar en Medium. Donde también escribo más artículos o al menos lo intento 👌🏻

Alex
Alex
alexcamachogz

35805Puntos

hace un año

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
12
18871Puntos

Genial, mil gracias!! 😄

Algo que me sirvio muchisimo a mi para asimilar bien estos conceptos fueron los JUEGOS.
Se los comparto para que los exploren y se diviertan aprendiendo:

4
35805Puntos
un año

El de Froggy y el grid garden son una pasada, ayudan muchisimo a interiorizar los conocimientos porque la forma visual que te proponen es muy buena!

1
6358Puntos
un año

Woow, acabo de probar flexfrogy y esta bastante buenisimo 😄 muchas gracias por el aporte n.n/

4
15763Puntos

Hola, excelente artículo, aunque la imagen que describe la Alineación del eje principal no es la correcta.

4
12152Puntos

Excelente tu artículo @alexcamachogz… Esperaré el próximo que espero sea “Grid Layout explicado con manzanitas 🍎🍏”

5
35805Puntos
un año

Jajaj de hecho existe, nada más que no lo publiqué en platzi aun, pero lo puedes encontrar aquí

6
35805Puntos
un año

Fe de erratas, si lo publiqué en platzi, aquí esta, cualquiera de los dos que gustes checar.
–> Grid

3
30150Puntos

Una belleza este artículo.

2
2856Puntos

Excelente aporte, Muchas gracias.

2
5143Puntos

Muchas gracias. Más claro no podia ser! 😃

2
10604Puntos

Que buen articulo, muchas gracias!

2

Es de los mejores articulos que he leído!!! muchas gracias @alexcamachogz

2

hola quisiera agregar esta imagen de tu blog la cual son los ejemplos visuales de la alineación del eje principal. también vi tu ccs grid, muy bien me ayuda mucho.

![]https://miro.medium.com/max/1050/0*k_69IK3ca6ImBjYS(url)

2
35805Puntos
un año

Hola! tu liga no dirige a nada pero me dí cuenta que la imagen que se encuentra en la alineación horizontal no es la correcta, pero aquí puedes consultar la que debería de estar

2
3176Puntos

Bien explicado… Muchas gracias!

2

Excelente artículo, super claro!!!
Gracias por el aporte 😃

2

Muchas gracias alejandra, con esto no tengo que citar tan seguido la docu de flexbox, ya que se encuentra en ingles, el detalle que resalto de esto es que pudiste explicar algo mas a fondo del correcto uso de flex…

2
784Puntos

😮 Te he visto en Twitter!!! Eres leyenda en la comunidad y alcanzaste 5.000 puntos como en dos meses, un placer leerte en un blog dentro de la plataforma!!!

2
14197Puntos

Muy útil e interesante! muchísimas gracias!

2
20219Puntos

Super bien explicado

2
17768Puntos

Me parece que hay un error, en la alineación en el eje principal, los ejemplos se muestran pero con Align-items, pero debería ser justify-content-center, between, etc.

1
35805Puntos
un año

Toda la razón, simplemente subí la imagen equivocada.
Esta sería la correcta.
1.png

1
1532Puntos
un año

Creo que esta imagen tampoco es la correcta, pues corresponde a la Dirección de los Ejes, y la que falta es la de la alineación (por defecto) del eje principal (justify-content).

Por cierto, excelente artículo, es la mejor explicación que he encontrado de Flexbox: correcta, precisa y sencilla. Enhorabuena!

2
28145Puntos

Hola @alexcamachogz !!!
Esta buenísimo el artículo, muchas gracias!!!
Sigue haciendo más, me encanto…
Yo estoy aprendiendo, si te suena podría ayudar en el proceso de la elaboración…hay que hacer más! jajajaj

2

Excelente, muy claro y preciso. Muchas gracias por tu aporte, me ayudó a aclarar algunas dudas, solo comentar que las imágenes de alineación al eje principal y eje secundarios son las mismas.

2
3551Puntos

Recuerdo que antes de usar gap usaba este truco, o bueno, a mi me gustaba, para para espaciar únicamente los elementos dentro del flex

.navLinks > *:not(:last-child) {
	margin-right: 10px;
}

y también comparto este recurso que esta muy bueno, y unos ejemplos usan flexbox https://1linelayouts.glitch.me/

2
5988Puntos

Muy buen artículo Alejandra.
Llevo algunos años trabajando con flexbox, creo que desde sus inicios, y nunca encontré una mejor explicación más sencilla de entender. Mucho mejor, incluso, que la que ofrecía en Mozilla en su momento.
Muchas gracias.