Flexbox y cómo se utiliza

Flexible box layout; Solución para desarrollos web responsive con todos los navegadores acutales y que se añade a la lista de displays y posicionamiento conocidos hasta 2018

• Elementos en linea (display:inline)
• Elementos en bloque (display: block)
• Elementos en tabla (display: table)
• Tipos de posicionamiento (L position: absolute, relative, fixed, styky,...)
• Layout flexible (display: flex)
• ...

Display: flex permite decidir el comportamiento de los hijos de un contenedor padre con respecto a el y entre ellos: Tanto en la vertical cómo en la horizontal

W3C define esta estructura como flujo flexible de contenidos siempre de izquierda a derecha(ej: horizontal o principal) y de arriba a abajo(eje vertical o secundario).

Ejemplos de maquetación con Flexbox.

Configuración desde el contenedor.

Un DIV CONTENEDOR CON 7 DIVS INTERNAS DE CLASS "ELEMENTO"

En el ejemplo superior hemos visto las propiedades
flex-direction (row,column), flex-wrap,(wrap, nowrap), flex-flow (direction wrap). De manera nativa dispone a sus elementos como "flex row nowrap"

Creamos CON 7 DIVS INTERNAS DE CLASS "ELEMENT" igual a la anterior para trabajar alineación horizontalde sus elementos.

Hemos visto la propiedad justify-content: y sus valores en el eje horizontal:spaces-aroun, space-between, flex-start

Creamos un DIV CONTENEDOR CON 7 DIVS INTERNAS DE CLASS "ELEMEN"

En el ejemplo superior hemos visto la propiedad align-items (strech, flex-start, flex-end, center, baseline,) y sus valores de alineación en el eje vertical.

Un DIV CONTENEDOR CON 14 DIVS INTERNAS DE CLASS "ELEME", igual a la anterior, para trabajar la alineación horizontal csuando tenemos más de una línea de elementos cómo contenido de la DIV padre.

En el ejemplo superior hemos visto la propiedad align-items (strech, flex-start, flex-end, center, baseline) y sus valores de aliación en el eje vertical.