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.
