Flexbox nos permite:
- Diseñar flexibles con menos codigo.
- Alinear los elementos de manera vertical y horizontal.
- Re ordenar los elementos sin tocar el Html.
Las 8 reglas de oro en flexbox
Regla 1:flexbox necesita un padre y por lo menos un hijo
Regla 2: El flex container tiene 2 ejes del padre
el eje principal que por defecto es horizontal y el eje vertical.
Regla 3: Podemos modificar el eje principal
flex-direction: row;
Es la que se muestre de forma horizontal, pero cuando flex-direction:column; el eje secundario se forma de manera horizontal
- El elemento row eso hace que los elemtos hijos se formen en fila de manera horizontal.
- el elemento column; que el eje principal se forme de manera vertival.
Regla 4: podeemos permitir el salto de columnas con flex-wrap.
estos es cuando ya no tengan espacio dentro del contenedor esto hace que salte
Regla 5: Alineamos elementos en eje principal con justify-content.
justify-content;alinea a los hijos en el eje principal de manera horizontal
Regla 6: Alineamos elementos en eje secundario con align--items.
las alineación de los hijos en el eje secundario se relizan con la propiedad align-items. stretch quiere decir que los hijos van a ocupar todo el espacio que el padre ocupa.
Regla 7; Podemos alinear los elementos hijos de forma individual en el eje secundario con align-self
Sobreescribe de forma individual el valor que nosotros emos elijido para el padre.
Regla 8; Los hijos flexibles ignoran propiedades como float, clear, vertical-align.
Solo para contenedor padre, solo los hijos no seran afectados con estas propiedades.