Flexbox

Flexbox es una nueva forma de diseñar nuestros sitios web. Está conformado por un conjunto de propiedades CSS, pensadas exclusivamente en crear interfaces web .

Flexbox nos permite:

  1. Diseñar flexibles con menos codigo.
  2. Alinear los elementos de manera vertical y horizontal.
  3. 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

No cargo que F

Regla 2: El flex container tiene 2 ejes del padre

el eje principal que por defecto es horizontal y el eje vertical.

No cargo que F

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

  1. El elemento row eso hace que los elemtos hijos se formen en fila de manera horizontal.
  2. el elemento column; que el eje principal se forme de manera vertival.
No cargo que F

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

No cargo que F

Regla 5: Alineamos elementos en eje principal con justify-content.

justify-content;alinea a los hijos en el eje principal de manera horizontal

No cargo que F

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.

No cargo que F

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.

No cargo que F

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.