Guía practica de Flexbox.

9420

Está guía estará dividida en dos partes, propiedades utilizadas en contenedores padre y propiedades utilizadas en sus elementos hijos.

Si quieres usar flexbox debes tener un contenedor y dentro elementos. La mayoría de acciones se ejecutan en el contenedor padre.

Propiedades en contenedores padre

display:flex;

🧭 El más importante al querer utilizar flexbox ya que sin este display nada funciona.

Una vez aplicado este comando, los elementos dentro del contenedor cambiaran ocupando el alto total de todo el contenedor. Claro que esto se puede modificar a voluntad con ayuda de las demás propiedades de flexbox.

flex-direction: row | column | row-reverse | column-reverse;

✍ Esos son los valores que recibe flex-direction.

row valor por defecto. Posicionamiento de izquierda a derecha.
column coloca los elementos en columna😝 de arriba hacia abajo.
row-reverse opuesto a row
column-reverse opuesto a reverse

flex-wrap: no-wrap | wrap | wrap-reverse;

✍ …

no-wrap Hará que absolutamente todos los elementos queden en una sola línea horizontal. Sin importar las especificaciones en proporción que le hubiésemos asignado. Por más que sean los elementos nunca se posicionaron debajo del otro.
wrap Ayuda a que si un elemento del contenedor es más grande lo coloca debajo automaticamente.
wrap-reverse Misma idea que wrap con la diferencia que el orden de los elementos se invierte

flex-flow: flex-direction | flex-wrap;

👏 BONUS Esta propiedad es un atajo que ahorra líneas de código ya que en su primer valor colocas flex-direction y luego flex-wrap, te recomiendo utilizarlo siempre. Hará nuestro código más optimo.

justify-content: flex-start | flex-end | center | space-around | space-between;

✍ …

🧭 Está propiedad se puede considerar como la magia de flexbox en cierto modo. Nos ayuda a decidir la posición de nuestros elementos y la distribución que tendrán.

flex-start valor por defecto. Posición izquierda, de mayor a menor.
felx-end posición derecha. Del menor al mayor, sin alterar el orden de los elementos.
center sencillamente lo centra horizontalmente, sin tener que usar nada más que esto para centrar.
space-around Distribuye todos los elementos por todo el contenedor padre y deja espacios entre cada uno de ellos. El espacio tanto al inicio como al final y entre cada uno de ellos será proporional.
space-between Es básicamente lo mismo que space-around pero sin esos margenes al principio y final.

align-items: flex-start | flex-end | center | stretch | baseline;

✍ …

flex-start valor por defecto. Posiciona los elementos arriba del contenedor.
flex-end posiciona los elementos abajo del contenedor.
center nos permite centrar los elementos de manera vertical. Junto a justify-content: center; nos genera un centrado tanto vertical como horizontal. Todo depende de lo que necesitemos.
stretch para utilizar este valor debes tener un height: auto; Lo que hace este valor es que los elementos ocupen el 100% del contenedor en lo que altura se refiere.
baseline Se utiliza para orientar la base de la fuente del elemento en una misma altura no importando que su tamaño fuente sea distinto entre cada elemento.

align-contenet: flex-start | flex-end | center | stretch | space-around | space-between;

✍ …

🧭 Está propiedad solo se utiliza cuando tenemos varias filas de elementos, pero si es una sola línea de elementos se usa align-items.

flex-start valor por defecto. Posiciona los elementos arriba del contenedor.
flex-end posiciona los elementos abajo del contenedor.
center nos permite centrar los elementos de manera vertical. Junto a justify-content: center; nos genera un centrado tanto vertical como horizontal. Todo depende de lo que necesitemos.
stretch para utilizar este valor debes tener un height: auto; Lo que hace este valor es que los elementos ocupen el 100% del contenedor en lo que altura se refiere.
space-around Distribuye todos los elementos por todo el contenedor padre y deja espacios entre cada uno de ellos. El espacio tanto al inicio como al final y entre cada uno de ellos será proporional.
space-between Es básicamente lo mismo que space-around pero sin esos margenes al principio y final.

Porpiedades en elementos hijo

flex-basis: 100px ;

🧭 Es una propiedad que nos permite sustituir el weight de un elemento, la diferencia es que flex-basis es dinámico porque podemos indicar la dirección tanto del ancho como del alto dependiendo claro del flex-direction que le asignemos.

flex-grow: # ;

🧭 A esta propiedad se coloca el valor que nosotros queramos normalmente es un 1.
Es un valor con el que le indicamos el crecimiento que va a tener el elemento en comparación de los demás elementos hermanos proporcionalmente. Todos van a tener la misma proporción para que abarquen el 100%. Esto nos puede servir para decirle a un elemento que crezca en proporción a los demás.

flex-shrink: # ;

🧭 Lo opuesto a flex.grow, es el nivel de decremento.

flex: flex-grow | flex-shrink | flex-basis;

👏 BONUS Esta propiedad es un atajo que nos permite utilizar tres propiedades diferentes en una sola línea de código.

order:# ;

🧭 Con esta propiedad podemos cambiar el orden de nuestros elementos.
Es importante que cada elemento dentro del contenedor tenga declarado un order para que funcione.
Esta modificación se aplica visualmente, la estructura HTML se mantiene igual.

align-self: flex-start | flex-end | center | stretch | baseline;

✍ …

🧭 Muy importante, si en el contenedor padre tenemos declarado un flex.direction: row; esta propiedad nos ordenara los elementos verticalmente. Pero si flex-direction: column; entonces lo ordenara horizontalmente.

flex-start row hasta arriba | column hasta izquierda
flex-end row hasta abajo | column hasta derecha
stretch row colocar height auto | column colocar weight auto
baseline Se utiliza para orientar la base de la fuente del elemento en una misma altura no importando que su tamaño fuente sea distinto entre cada elemento.