Curso rapido de FlexBox

¿Qué es Flexbox?


Es una nueva forma de posicionar nuestros elementos en el sitio web, es mucho más fácil y utilizaremos menos código.

¿Qué tenemos que saber?


Flexbox tiene la siguiente estructura: un contenedor “padre” (que contiene a los elementos que deseamos posicionar) y contenedores “hijos” (que son los elementos flexibles).

Para designar un contenedor padre colocamos la siguiente propiedad en la clase del contenedor
Display :: flex

Haciendo esto definimos el contenedor como flexible y todos sus hijos como elementos flexibles.
El valor flex hace que el contenedor flexible sea un bloque dentro del elemento padre al que pertenezca

Propiedades contenedor padre

Flex-direction

Flex-direction: row|row-reverse | column | column-reverse

Flex-direction: row:
flexbox 1
Es la propiedad por defecto. Alinea los elementos uno al lado del otro. Como float left
flex-direction: row-reverse
flexbox 2
Coloca los elementos en línea pero de forma inversa
flex-direction: column
flexbox 3
Coloca los elementos en forma de columna
flex-direction: column-reverse
flexbox 5
Coloca los elementos en columna pero invertido
Flex-wrap
flex-wrap: wrap
flexbox 6
respeta el ancho de los elementos hijos. (si tienes muchos elementos hijos se generarán diferentes líneas)
flex-wrap: nowrap
flexbox 7
Ajusta los elementos en una línea de forma dinámica (el ancho lo genera automáticamente).
Justify-content

Justify-content: flex-start | flex-end | center | space-between | space-around

Posiciona los elementos hijos horizontalmente

justify-content: flex-start
flexbox 8
Es la posición por defecto, por lo tanto posiciona a los elementos hijos al lado izquierdo del contenedor padre.
justify-content: flex-end
flexbox 9
Posiciona los hijos al final del contenedor (derecha).
justify-content: center
flexbox 10
Es la magia en persona ya que posiciona los elementos hijos centrados dentro del contenedor padre.
justify-content: space-between
flexbox 11
Genera un espacio entre los elementos hijos, en teoría siempre deja un elementos en “star” y otro en “end”, repartiendo el espacio restante entre los elementos
justify-content: space-around
flexbox 12
Distribuye el espacio para todos iguales entre elementos incluyendo los margenes de la izquierda y derecha.
Align-items

Align-items: flex-start | flex-end | center | stretch | baseline

Posiciona los elementos hijos verticalmente.

align-items: flex-star
flexbox 13
Posición por defecto, colocando los elementos hijos al inicio del contenedor padre
align-items: flex-end
flexbox 14
Posiciona a los hijos al final del contenedor padre.
align-items: center
flexbox 15
Posiciona los elementos hijos al centro del contenedor verticalmente.
align-items: stretch
flexbox 16
Para esta propiedad tienes que eliminar la altura de tus elementos hijos, ya que stretch abarcará el 100% de altura del contenedor padre, respetando el padding y margin
align-items: baseline
flexbox 17
Alinea los elementos según la base de la fuente, en la imagen podrás notar que todas las letras están alineadas en su base, independiente que la fuente de la caja del centro sea mayor
Align-content

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

Ojo, solo funciona cuando hay más de una línea de elementos hijos. Es igual a la propiedad “aling-items”, por lo tanto tienes que elegir cual de las dos ocupar

align-content: flex-start
flexbox 18
Posiciona los elementos al inicio del contenedor padre
align-content: flex-end
flexbox 19
Posiciona los elementos al final del contenedor
align-content: center
flexbox 20
Posiciona los elementos centrados verticalmente
align-content: space-between
flexbox 21
Genera un espaciado dentro de las dos líneas o más
align-content: space-around
flexbox 22
Distribuye el espacio entre las líneas tanto al centro como los bordes
align-content: stretch
flexbox 23
Para esta propiedad tienes que eliminar la altura de tus elementos hijos, ya que stretch abarcará el 100% de altura del contenedor padre, respetando el padding y margin.

Propiedades elementos hijo

Estás propiedades las aplicaremos a los div que se encuentran dentro del contenedor padre

order:; Ordena los elementos hijos según el número que tu le designes

flex-grow:; Especifica el factor de crecimiento de un elemento flexible. Se especifica qué cantidad de espacio debe ocupar el elemento dentro del contenedor flexible. Si todos los elementos tienen flex-grow 1, el espacio restante se distribuye entre los elementos

flex-shrink:; Si utilizamos esta propiedad con valor “0” el elemento hijo no podrá hacerse más pequeño que su ancho establecido.

flex-basis:; Con esta propiedad podemos especificar el tamaño inicial que tendrá un elemento hijo

flex:1 1 auto; Es la propiedad resumida de flex-grow, flex-shrink y flex-basis, generalmente se utiliza con la unidad “1 1 auto”.

align-self: auto | flex-start | flex-end | center | baseline | stretch;
Con aling-self podemos posicionar solo un elemento hijo, generando así diferentes posiciones para cada elemento