Etiquetas Flexbox

Los grandes beneficios de esta forma de maquetación de páginas web son ordenar elementos de HTML de forma sencilla, sin importar en que orden están escritos, acortar el código, hacerlo más semántico, facilitar el diseño responsive  y ayudar alinear elementos de forma vertical, horizontal de forma sencilla.

Las etiquetas:
display:flex;
flex-direction:row / column;
flex-flow: ( shorthand flex-direction y flex-wrap  ejemplo row nowrap;)
justify-content: (alinear elementos eje principal)
align-items: (alinear elementos eje secundario)
align-self: (alinear de forma individual)
flex-grow:(# proporciones)
flex-wrap: wrap; or  nowrap
flex-basis:(width de Flexbox)
order:( # darles orden a los elementos +/- )

Regla 1 Flexbox

Flexbox necesita de por lo menos un elemento padre y un elemento hijo, así por ejemplo:

<section>
<article class=”uno”></article>
<article class=”dos”></article>
<article></article>
<section>

Y el elemento padre debe tener el display:flex;

Regla2 Flexbox

Flexbox container tiene dos ejes: El eje horizontal es el principal, el X es el secundario.

Regla3 Flexbox

flex-direction se usa en el padre y determina la forma en que se muestran los elementos. Define la orientación y modifica el eje principal.

flex-direction:row;
Es el predeterminado y hace que los elementos hijo se muesten uno al lado del otro.

flex-direction:column;
Hace que los elementos hijo se muestren uno debajo del otro.

Regla4 Flexbox

flex-wrap: wrap

Si los elementos hijos están muy estrechos, calcinados, con esto se les da permiso para saltar a la siguiente línea. La propiedad wrap dice que si el contenedor no alcanza el elemento pasa automáticamente abajo.

Acá un ejemplo: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_flex-wrap

Regla5 Flexbox

justify-content:
Se usa en el elemento padre y establece la forma en que se van a distribuir los elementos, de esta forma se centran los elementos hijos.

Regla6 Flexbox

Nota: El valor predeterminado es align-items: stretch; por esto los elementos hijo tienen la altura del elemento contenedor.

align-items:
Es la etiqueta para alinear elementos en el eje secundario

Regla7 Flexbox

align-self:
Con ella podemos alinear elementos hijo de forma individual en el eje secundario.

Regla8 Flexbox

Los elementos hijos ignoran etiquetas como float, clear, vertical-align. Los padres si las entienden, pero los hijos son “flexibles”.

Regla9 Flexbox

El tamaño de los elementos hijos se ve definido por

flex-grow: (un número positivo);
Reparte el espacio disponible.

flex-shrink (casi no se usa)

flex-basis (es como el width)

El shorthand es
flex:(flex-grow flex-shrink flex-basis)
flex:(1 1 0px)

O esta, que es más usada :
flex:(flex-grow flex-basis)
flex:(1 0px;)

Regla10 Flexbox

Los elementos de Flexbox se pueden organizar facilmente

order:(Números que organizan) …. positivos o negativos.
De menor a mayor.