Curso CSS Flexbox Paso a Paso

Sean bienvenidos a este nuevo tutotorial a forma de curso en CSS Flexbox, anteriormente hemos subido el curso de CSS Grid, el cual te invitamos a tomar, si ya manejas flexbox, pero si no es así, te recomendamos empezar aprendiendo flexbox y posteriormente el curso de CSS Grid, aprendiendo el primero, te será más fácil entender este curso, es decir, Grid, ya que van de la mano ambas tecnologías

sin mas preambulos empezemos con el curso

Para aplicar flexbox, es necesario crear un contenedor flexible, el cual tendrá en su interior elementos que a su vez también serán o pueden ser flexibles.

La propiedad Display define un contenedor flexible para los componentes que irán dentro de él, es decir, sus componentes hijos, definiendo los valores flex o inline-flex, todo depende de los valores que le asignamos de acuerdo a nuestras necesidades

ejemplo

See the Pen flex-container by FranDev (@francisco-v-squez-alonso) on CodePen.

Te podría interesar

Curso CSS Grid Paso a Paso

Curso CSS Animaciones Paso a Paso

Propiedades de un contenedor flexible

Un contenedor flexible puede contener las siguientes propiedades

• flex-direction
• flex-wrap
• justify-content
• align-ítems
• flex-flow

 

flex-direction

flex-direction: La propiedad flex-direction establece el eje principal de nuestro contenedor, definiendo así, la dirección en la que los elementos se colocan en el contenedor. Flexbox es un concepto de diseño de una sola dirección. Esta propiedad puede tomar los siguientes valores

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

Veamos un ejemplo de cada propiedad y su resultado

flex-direction: row

Los elementos aparecerán en fila de izquierda a derecha

See the Pen flex-direction-row by FranDev (@francisco-v-squez-alonso) on CodePen.

flex-direction: row-reverse

Los elementos aparecerán en fila de derecha izquierda

See the Pen flex-direction-row-reverse by FranDev (@francisco-v-squez-alonso) on CodePen.

flex-direction: column

Los elementos aparecerán ordenados en columna de arriba  hacia  abajo

See the Pen flex-direction-column by FranDev (@francisco-v-squez-alonso) on CodePen.

flex-direction: column-reverse

Los elementos aparecerán ordenados en columna de abajo  hacia arriba

See the Pen flex-direction-column-reverse by FranDev (@francisco-v-squez-alonso) on CodePen.

flex-wrap

De manera predeterminada los elementos de un contenedor intentan alinearse y ajustarse al máximo dentro de este. pero gracias a la propiedad flex-wrap, podemos cambiar este comportamiento

Puede tomar los siguientes valores:

flex-wrap: wrap | nowrap | wrap-reverse

 flex-wrap: wrap

Permite que los elementos dentro de un contenedor se desborden, es decir, que pasen a la siguiente línea 

See the Pen flex-wrap-wrap by FranDev (@francisco-v-squez-alonso) on CodePen.

 flex-wrap: nowrap

Impide que los elementos dentro de un contenedor se desborden, es decir, que pasen a la siguiente línea  
 

See the Pen flex-wrap-nowrap by FranDev (@francisco-v-squez-alonso) on CodePen.

En este ejemplo nos damos cuenta del efecto que provoca el hecho de decirle a nuestro contenedor que no se desborde, (flex-wrap: nowrap) podemos observar que los elementos se salen de nuestro contenedor, si este tiene un tamaño establecido y este, es menor que la media que le dimos a los elementos

 flex-wrap: wrap-reverse

Los elementos se desbordaran en forma inversa es decir de atrás hacia delante

See the Pen flex-wrap: wrap-reverse by FranDev (@francisco-v-squez-alonso) on CodePen.

flex-flow

shorthand o atajo de las propiedad flex-direction y flex-wrap, a su vez, esta presenta sus valores por defecto; flex-flow; row nowrap a continuación se muestra un ejemplo.

flex-flow: row nowrap

Con esta regla, estaremos indicando que deseamos que nuestros elementos se muestran en fila y que NO se desborden 

See the Pen flex-flow by FranDev (@francisco-v-squez-alonso) on CodePen.

flex-flow: row wrap

Con esta regla, estaremos indicando que deseamos que nuestros elementos se muestran en fila y que SI se desborden, es decir, que bajen a la siguiente línea

See the Pen flex-flow:row wrap by FranDev (@francisco-v-squez-alonso) on CodePen.

Practica en tu editor de código con las siguientes dos propiedades flex-flow column wrap y flex-flow column nowrap haber que sucede.

justify-content

Define la alineación de los ítems a lo largo del eje principal horizontal, básicamente, distribuye los elementos en el espacio sobrante del contenedor, de cierta manera justify-content trata de evitar el desbordamiento de los elementos ejerciendo cierto control sobre ellos, ya que estos pueden ser o no inflexibles 

Puede tomar los siguiente valores

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | right | left | safe | unsafe

las propiedades mas utilizadas por lo general son:


justify-content: flex-start

Alinea los elementos flexibles al inicio de izquierda a derecha del contenedor

See the Pen justify-content-flex-start by FranDev (@francisco-v-squez-alonso) on CodePen.

 

justify-content: flex-end

Alinea los elementos flexibles de derecha a izquierda del contenedor

See the Pen justify-content-flex-end by FranDev (@francisco-v-squez-alonso) on CodePen.

justify-content:center

Alinea los elementos flexibles al centro del contenedor

See the Pen justify-content-center by FranDev (@francisco-v-squez-alonso) on CodePen.

justify-content: space-between

Deja un espacio entre los elementos sin tomar en cuenta los extremos 

See the Pen justify-content-space-between by FranDev (@francisco-v-squez-alonso) on CodePen.

justify-content: space-around

Deja un espacio entre, antes y después de los elementos en las líneas

See the Pen justify-content-space-around by FranDev (@francisco-v-squez-alonso) on CodePen.

justify-content: space-evenly

El espacio es exactamente distribuido entre los elementos

See the Pen justify-content-space-evenly by FranDev (@francisco-v-squez-alonso) on CodePen.

align-items

Define el comportamiento de los elementos en el eje transversal vertical del contenedor, es lo más parecido a justify-content que ordena los elementos en el eje principal. mientras que align-items lo hace en el eje transversal, pero es basicamente lo mismo



Puede tomar los siguientes valores

align-items: stretch | flex-end | center | flex-start | baseline | first-baseline | last-baseline | start | end | self-start | self-end | safe | unsafe




 align-items: flex-end

Alinea los elementos en la parte inferior del contenedor

See the Pen align-items: flex-send by FranDev (@francisco-v-squez-alonso) on CodePen.

align-items: flex-start

Alinea los elementos en la parte superior del contenedor 

See the Pen align-items-flex-start by FranDev (@francisco-v-squez-alonso) on CodePen.

 align-items: center

Alinea los elementos en la parte central del contenedor 
 

See the Pen align-items-center by FranDev (@francisco-v-squez-alonso) on CodePen.

 align-items: stretch

Intenta rellenar todo lo posible del alto de un elemento, respetando su anchura 

See the Pen align-items-stretch by FranDev (@francisco-v-squez-alonso) on CodePen.

 align-items: baseline

Los elementos se alinean tomando como base sus líneas de base alineadas 

See the Pen align-items-baseline by FranDev (@francisco-v-squez-alonso) on CodePen.

align-content

Define la alineación del contenedor cuando sobra espacio dentro del mismo, siempre en el eje transversal, digamos que es lo mismo que justify-content el cual alinea los elementos en el eje principal, para que esta propiedad se pueda aplicar, es necesario que exista más de una línea de elementos.
Puede tomar los siguiente valores

align-content: flex-start | flex-end | center | stretch | space-between | space-around | space-evenly | start | end | left | right | baseline | first baseline | last | baseline | safe | unsafe




align-content: flex-start

Alinea los elementos  al inicio de izquierda a derecha del contenedor

See the Pen align-content-flex-start by FranDev (@francisco-v-squez-alonso) on CodePen.

 

align-content: flex-end

Alinea los elementos  al final de izquierda a derecha del contenedor

See the Pen align-content: flex-end by FranDev (@francisco-v-squez-alonso) on CodePen.

align-content:center

Alinea los elementos  al centro del contenedor

See the Pen align-content: center by FranDev (@francisco-v-squez-alonso) on CodePen.

align-content: space-around

Deja un espacio entre, antes y después de los elementos en las líneas

See the Pen align-content: space-around by FranDev (@francisco-v-squez-alonso) on CodePen.

align-content: space-between

Deja un espacio entre los elementos sin tomar en cuenta los extremos

See the Pen align-content: space-between by FranDev (@francisco-v-squez-alonso) on CodePen.

align-content: space-evenly

El espacio es exactamente distribuido entre los elementos

See the Pen align-content: space-evenly by FranDev (@francisco-v-squez-alonso) on CodePen.

align-content: stretch

las líneas se estiran para abarcar todo el espacio sobrante

See the Pen align-content: stretch by FranDev (@francisco-v-squez-alonso) on CodePen.

align-content:baseline

Los elementos se alinean tomando como base sus líneas de base alineadas  
 

See the Pen align-content: baseline by FranDev (@francisco-v-squez-alonso) on CodePen.

Propiedades de los elementos hijos del contenedor

Una vez que hemos conocido las propiedades principales de un container, es hora de conocer las propiedades de sus hijos, es decir, los elementos que contiene dentro

Las propiedades de los elementos hijos son los siguientes

Order

La propiedad de orden nos permite controlar el orden en que aparecen en el contenedor flexible. siendo su valor por defecto 0

See the Pen order by FranDev (@francisco-v-squez-alonso) on CodePen.

flex-grow

La propiedad flex-grow indica cuando debe crecer un elemento con respecto a los demás elementos del contenedor, en otras palabras, es como si le diéramos un width mayor que a los otros elementos hijos, con la diferencia que con un único valor estamos especificando, puede tener como valor un número, mientras que 0 es su valor por defecto.

See the Pen flex-gorw by FranDev (@francisco-v-squez-alonso) on CodePen.

flex-shrink

En contraposición con la propiedad flex-grow está la propiedad flex-shrink la cual es sinónimo de reducción o disminución de tamaño de un elemento con relación a sus otros elementos adyacentes, también mencionar que si le das valores negativos, no se aplicaran los cambias veamos cómo funciona

See the Pen flex-shrink by FranDev (@francisco-v-squez-alonso) on CodePen.

flex-basis

La propiedad flex-basis especifica la longitud inicial que deberá tener un elemento flexible,la longitud puede definirse en px, rem, em, porcentaje, etc, también es posible especificar una palabra clave, sin embargo, no se aconseja utilizar esta forma ya que pueden surgir problemas de compatibilidad con navegadores.

Su valor por defecto es auto, sin embargo, si se establece su valor en 0, el espacio restante cercano al contenido, no se toma en cuenta, por el contrario, si su valor se deja en auto, el espacio restante es distribuido, en funcion de su valor creciente.

See the Pen flex-basis by FranDev (@francisco-v-squez-alonso) on CodePen.

flex

flex, es el atajo para las propiedades flex-grow, flex-shrink y flex-basis. El segundo y tercer parámetro flex-grow y flex-basis son opcionales.
Su valor predeterminado es 0 1 auto, si configura un solo valor numérico, sería 1 0. para entenderlo mejor, es recomendable saber esta sintaxis:

flex: none | flex-grow | flex-shrink | flex-basis

See the Pen flex by FranDev (@francisco-v-squez-alonso) on CodePen.

align-self

Esta propiedad permite que la alineación predeterminada se anule para los elementos individuales, es decir, que si has especificado determinada medida a un elemento del contenedor, por ejemplo de 200px, la propiedad align-self podrá cambiar ese comportamiento de manera individual, apuntando únicamente a los elementos que deseas modificar

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

See the Pen align-self by FranDev (@francisco-v-squez-alonso) on CodePen.

Nos alegra que hayas llegado hasta el final y esperamos que este curso te haya aportado algún valor y dado un poco de luz, si así es, no olvides compartir el conocimiento en las redes sociales con tus amigos, familiares o conocidos. te seguiremos trayendo más aportes de este tipo, hasta la próxima