Flex Direction
Esta propiedad especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección en el flex-conteiner. permite manejar el direccionamiento de los flex items, es decir cambiar el flujo normal de los elementos flexibles en el main axis. Esta propiedad tiene múltiples valores que nos van a permitir variar de todas las formas el direccionamiento de los elementos hijos flexibles. Sus valores son:
- row (por defecto)
- row-reverse
- column
- column-reverse
flex-direction: row;
Con el valor row
definimos el eje principal (main axis) del flex container horizontalmente de izquierda a derecha.
.flex-container {
display: flex;
flex-direction: row;
}
flex-direction: row-reverse;
Con el valor row-reverse
(fila inversa) los flex items se apilan en el eje principal (main-axis) pero esta vez de derecha a izquierda, esta vez intercambiando el main-start y main-end respectivamente.
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-direction: column;
Con el valor column
los flex items se apilan en una columna de arriba hacia abajo intercambiando los ejes principal y secundario: con column el main-axis vertical y el cross-axis es horizontal.
.flex-container {
display: flex;
flex-direction: column;
}
flex-direction: column-reverse;
Con el valor column-reverse
los flex items se apilan en una columna invertida, esta vez de abajo hacia arriba, intercambiando los ejes principales y secundario e intercambiando los puntos inicial y final (main-start y main-end).
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Flex Wrap
El comportamiento inicial del contenedor flexible es poder mantener los flex items en su main axis o eje horizontal sin importar que las dimensiones de estos items cambien, pero hay ocasiones donde vamos a querer controlar este alineamiento y hacer que los elementos puedan saltar de línea para poder mantener una apariencia deseada en estos flex items. Con flex-wrap vamos a poder especificar las líneas del contenedor flexible, si queremos un contenedor de una línea o un contenedor multilínea para con sus flex-items. Sus valores son:
- nowrap (por defecto)
- wrap
- wrap-reverse
flex-wrap: nowrap;
Con este valor Los flex-items son distribuidos en una sola línea sin importar cuántos items sean, el contenedor tratará de de conservar sus ítems en su línea principal lo cual puede llevar a que se desborden del contenedor flexible si la suma de estos es mayor al ancho del contenedor. es decir el contenedor tendrá una sola linea principal (single-line).
.flex-container {
display: flex;
flex-wrap: nowrap;
}
flex-wrap: wrap;
Con este valor en la propiedad flex-wrap
los elementos flexibles son colocados en varias líneas si el ancho de estos es superior al ancho del contenedor flexible. Esto es romper la línea del eje horizontal si les es necesario para así conservar las características de dimensiones de los flex items. Esto es de izquierda a derecha y de arriba a abajo. Esto vuelve al contenedor un elemento multi-línea.
.flex-container {
display: flex;
flex-wrap: wrap;
}
flex-wrap: wrap-reverse;
Con el valor wrap-reverse
en la propiedad flex-wrap los flex items también pueden romper la línea del eje horizontal si les es necesario. Pero esta vez el orden es de izquierda a derecha y de abajo a arriba.
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Flex Flow
La propiedad flex-flow
es simplemente la forma shorthand o forma rápida para las propiedades flex-direction y flex-wrap vistas anteriormente. Los valores que se aplican por defecto a esta propiedad son las mismas que se aplican a las propiedades que están actuando como valor. Sus valores son:
- valores de la propiedad flex-direction
- valores de la proiedad flex-wrap
.flex-container {
display: flex;
flex-flow: row-reverse wrap;
}
Ver ejemplo
Justify Content
Justify-content
nos va a permitir alinear los elementos en el eje principal (main axis) del contenedor flexible, esto puede ser de forma vertical o horizontal según lo especifiquemos con flex-direction, también nos va a ayudar a distribuir los flex items en el contenedor flexible cuando los items no utilicen todo el espacio disponible en su eje principal actual. Esto es declarar la forma en que el navegador debe distribuir el espacio disponible entre los items flexibles. Sus valores son:
- flex-start (por defecto)
- flex-end
- center
- space-between
- space-around
justify-content: flex-start;
El valor flex-start
de la propiedad justify-content lo que hace es alinear los flex items en el main start o comienzo del eje principal del contenedor flexible.
.flex-container {
display: flex;
justify-content: flex-start;
}
justify-content: flex-end;
El valor flex-end
de la propiedad justify-content lo que hace es alinear los flex items en el main end o final del contenedor flexible.
.flex-container {
display: flex;
justify-content: flex-end;
}
justify-content: center;
El valor flex-center
lo que hace es alinear los flex items en el centro del main axis del contenedor flexible.
.flex-container {
display: flex;
justify-content: center;
}
justify-content: space-between;
space-between
alinea los flex items a lo largo del main axis y va a hacer que los flex items se tomen la misma distancia o espaciado entre ellos en main axis del contenedor flexible quedando el primer y último elemento alineados con los bordes del contenedor en el eje principal.
.flex-container {
display: flex;
justify-content: space-between;
}
justify-content: space-around;
space-around
alinea los flex items a lo largo del main axis y muestra los flex items con el mismo espacio de separación entre si, en diferencia del valor space-between los items primero y ultimo toman también el espaciado entre los bordes del contenedor flexible.
.flex-container {
display: flex;
justify-content: space-around;
}
Align Items
Align-items
nos permite establecer la alineación que tendrán por defecto los flex item en el Cross axis (Eje secundario), es similar a la propiedad justify-content pero esta vez la dirección es perpendicular al main axis del contenedor flex. Sus valores son:
- stretch (por defecto)
- flex-start
- flex-end
- center
- baseline
align-items: stretch;
El valor stretch
(estirar) para la propiedad align-items lo que va a hacer es tratar de llenar toda la altura (o anchura) desde el cross start hasta el cross end del contenedor flexible, siempre y cuando los items no tengan propiedades de dimensión definidas.
.flex-container {
display: flex;
align-items: stretch;
}
align-items: flex-start;
Con flex-start
los flex items se apilan en el cross start del cross axis (eje secundario) del contenedor flexible, es decir en el inicio del eje transversal.
.flex-container {
display: flex;
align-items: flex-start;
}
align-items: flex-end;
Con flex-end
los flex items se apilan al final del cross axis, esto es en el cross end del eje secundario del contenedor flexible.
.flex-container {
display: flex;
align-items: flex-end;
}
align-items: center;
Con center
los flex items se apilan en el centro del cross axis (eje secundario) del contenedor flexible, ósea en el eje transversal.
.flex-container {
display: flex;
align-items: center;
}
align-items: baseline;
baseline
alinea los flex items en el cross axis (eje secundario) del contenedor flexible basandose en las líneas base de cada item, esta se define en base a los texto de los flex ítems.
.flex-container {
display: flex;
align-items: baseline;
}
Align Content
Align-content
ajusta las líneas dentro del flex container cuando hay espacio extra en el eje secundario. Esta propiedad sólo tiene efecto cuando el contenedor flexible es multi-línea, y esto solo lo hacemos por medio de los valores wrap y wrap-reverse de la propiedad flex-wrap. Sus valores son:
- stretch (por defecto)
- flex-start
- flex-end
- center
- space-between
- space-arount
align-content: stretch;
Con el valor stretch
Las líneas se extienden para ocupar el espacio restante. El espacio libre es dividido equitativamente entre todas las líneas. En pocas palabras estira las líneas para que ocupen el eje transversal completo.
.flex-container {
display: flex;
align-content: stretch;
}
align-content: flex-start;
El valor flex-start
lo que hace es ajustar las líneas desde el inicio del eje transversal (cross start) del contenedor flexible.
.flex-container {
display: flex;
align-content: flex-start;
}
align-content: flex-end;
El valor flex-end
lo que hace es ajustar las líneas desde el final del eje transversal (cross start) del contenedor flexible.
.flex-container {
display: flex;
align-content: flex-end;
}
align-content: center;
Con el valor center
se ajustan las líneas alrededor del centro del eje transversal.
.flex-container {
display: flex;
align-content: center;
}
align-content: space-between;
space-between
en la propiedad align-content va a distribuir las líneas a lo largo del eje transversal, de principio a fin (desde el cross start hasta el cross end).
.flex-container {
display: flex;
align-content: space-between;
}
align-content: space-around;
space-around
en la propiedad align-content va a distribuir las líneas a lo largo del eje transversal, de principio a fin (desde el cross start hasta el cross end) pero esta vez el primero y último item toman también el espaciado entre los bordes del contenedor flexible.
.flex-container {
display: flex;
align-content: space-around;
}
Order
La propiedad order
nos ayuda a especificar el orden para disponer los elementos en su contenedor flexible. Los elementos se dispondran en orden ascendente según el valor de la propiedad order. Los elementos con el mismo valor de order se dispondrán en el orden en el cual aparecen en el DOM.
order: 0;
.flex-item-1 {
order: 3;
}
.flex-item-2 {
order: 0;
}
.flex-item-3 {
order: 1;
}
.flex-item-4 {
order: 2;
}
Con el valor orden vamos a poder ordenar de forma individual los ítems según el número de orden que le demos.
El valor por defecto e inicial es 0.
Flex Grow
flex-grow
especifica el factor de crecimiento del flex items, podemos en su valor determinar hasta que punto el flex item crecerá en relación al resto de ítems que se distribuyen el espacio disponible dentro del contenedor flexible.
El valor por defecto e inicial es 0. (Los números negativos no son válidos)
flex-grow: 0;
.flex-item-1 {
flex-grow: 1;
}
.flex-item-2 {
flex-grow: 1;
}
.flex-item-3 {
flex-grow: 1;
}
.flex-item-4 {
flex-grow: 1;
}
Si todos los flex items tienen el mismo valor de flex-grow
los ítems tendrán el mismo tamaño y ocuparan todo el espacio disponible brindado por su contenedor flexible. Para saber el valor dado a cada ítem como factor de crecimiento solo debemos de hacer una suma consecutiva con los valores de flex-grow
de cada ítem y dividirlo por el valor disponible en el contenedor flexible.
En este caso el primer elemento flex ocupa más espacio en relación con el tamaño de los otros flex ítems debido a que tiene mayor factor de crecimiento, para determinar cuánto crece en relación a los demás ítems debemos de multiplicar el valor asignado a cada flex items por el factor de crecimiento aplicado en la propiedad.
Flex Shrink
flex-shirnk
permite especificar el valores de encogimiento o contracción en los elementos flexibles. Es decir, todo lo contrario a flex-grow. Con el valor indicado en números especificaremos cuánto se reducirá el item con respecto al resto de ítems dentro del contenedor flexible cuanto el espacio en este es negativo, osea cuando la suma total de los flex items supera el espacio disponible en el flex container.
El valor por defecto e inicial es 1. (Los números negativos no son válidos)
flex-shrink: 1;
.flex-item-1 {
flex-shrink: 1;
}
.flex-item-2 {
flex-shrink: 2;
}
.flex-item-3 {
flex-shrink: 1;
}
.flex-item-4 {
flex-shrink: 1;
}
Por medio de la propiedad flex-shrink
todos los elementos flexibles se pueden reducir, pero si lo ponemos a cero (0) los flex items no se reducirán, estos van a mantener su tamaño original.
Flex Basis
flex-basis
Permite establecer el tamaño base del main size del flex item que de forma predeterminada actuaria como el width del elemento flexible. Los valores que podemos aplicar son los mismo que usamos para las propiedades tradicionales width y height.
El valor por defecto e inicial es auto.
flex-basis: auto;
.flex-item-1 {
flex-basis: auto;
}
.flex-item-2 {
flex-basis: auto;
}
.flex-item-3 {
flex-basis: 150px;
}
.flex-item-4 {
flex-basis: auto;
}
Flex
La propiedad flex es el método shorthand o forma rápida para especificar en una sola propiedades los valores de flex-grow, flex-shrink y flex-basis.
Los valores por defecto son 0 | 1 | auto.
.flex-item {
flex: flex-grow flex-shrink flex-basis;
}
Esta propiedad especifica 3 valores para controlar la flexibilidad de los elementos flexibles. Estos se pueden especificar de las siguientes forma:
flex: 2 2 10%; /* Tres valores: flex-grow | flex-shrink | flex-basis */
flex: 1 30px; /* Especificamos dos valores: flex-grow | flex-basis */
flex: 2 2; /* Dos valores sin unidades: flex-grow | flex-shrink */
flex: auto; /* Especificamos los valores por defecto de cada propiedad */
flex: none; /* Anulamos las características de las propiedades: (0 0 auto)*/
Align Self
La propiedad align-self
nos permite especificar la alineación de algún flex item en particular dentro del contenedor flexible en el cross axis o eje secundario.
align-self: auto;
.flex-item-1 {
flex-shrink: 1;
}
.flex-item-2 {
flex-shrink: 2;
}
.flex-item-3 {
flex-shrink: 1;
}
.flex-item-4 {
flex-shrink: 1;
}
Sus valores son:
- auto (por defecto)
- flex-start
- flex-end
- center
- baseline
- stretch
Como vemos los valores son los mismo que hemos visto anteriormente aplicados a otras propiedades solo que cuando se aplican a esta propiedad align-self actúan solamente en los flex items seleccionados dentro del contenedor flexible.
El código de ejemplo de Flex-Flow creo que está equivocado.
Donde dice:
flex-wrap: row-reverse wrap;
¿no debería decir:?
flex-flow: row-reverse wrap;
Asi es, ya esta corregido. Gracias
Vale mostro genio figura crack mastodonte ídolo champion referente maquina artista elemento jefe fiera maestro socio golfo valiente héroe tanque fenómeno gacela tigre bestia titán animal gigante prenda semental coloso hacha mostrenco campeón helicóptero killer ciclón pieza brontosaurio vikingo vividor , crack, fiera, mostro, animal, máquina, gigante, artista, titán, caimán, tiranosaurio, superman, prenda, semental, ninja, figura, genio, tsunami, león, terminator, goliat, terremoto, tigre, vaquero, tanque, mole, samurai, coloso, paladin, willyrex, lobezno, velociraptor, espectro, vikingo, godzilla, caza de combate, campeón, adamantium, robocop, zeus, capitán, king kong, depredador, tornado, monster truck, presa canario, johnny bravo, mastodonte, coronel, héroe, canallita, champion, jefe, chulazo,… Leer más »
Fantástico aporte!
hola, esta muy explicado esta guia para aprender flexbox. Gracias master.
El link del ejemplo “align-items: baseline ” esta roto.
Estoy buscando información sobre el tema de los flexbox, he visto alguno y he escuchado observado muchos vídeos, pero en realidad la información que presentan aquí es estupenda, he aprendido muchísimo gracias ha este material. Felicitaciones !!!
Muy claro,, gracias por compartir esta info. Buen blog
Muy Muy Muy bueno gracias hermano
Excelente guía en español para aprender Flexbox, gracias por tomar el tiempo para realizarla.
buena guía, gracias por compartir
muuy bueno y util gracias por el tiempo que te das para podenos enseñar cosas como estas 😉
Muchas gracias por la guía. ¡Está genial!
¿Podrían revisar el enlace del ejemplo para align-self?
gracias por la información clara y sencilla de entender.
la image de space between está repetida
la imagen de space between está repetida
Tienes razón, muchas gracias
Gracias por la publicación, muy completa
no puedo creer lo bien explicado que está ahora si entendi esto 🙂
Excelente aporte
Estaba mejor como lo tenías la otra vez que no había que andar a abrir pestañas y era usar el scroll y dar un espacio a las imágenes a la que mas convenía, pero gran trabajo igualmente 🙂