Módulo de diseño de caja flexible

de CSS

Diseño Flexbox
Antes del Módulo de diseño de caja flexible, había cuatro modos de
diseño:

 Bloquear, para secciones en una página web.

 En línea, para texto.
 Tabla, para datos de tablas bidimensionales.
 Posicionado, para la posición explícita de un elemento.

El Módulo de diseño de caja flexible facilita el diseño de una estructura

flexible de diseño receptivo sin tener que usar flotadores o
posicionamiento.

Elementos Flexbox
Un diseño de flexbox consta de un elemento principal, con uno o más
elementos secundarios.

Ejemplo
Un contenedor con tres elementos:

<div class="flex-container">
<div>1</div>
<div>2</div>
 <div>3</div>
</div>

Elemento principal (contenedor)

El elemento principal se vuelve flexible estableciendo la propiedad de
visualización en flexión :

Ejemplo
.flex-container {
display: flex;
}

Propiedades de Flexbox para el elemento principal:

 flexión
 flex-wrap
 flex-flow
 justificar-contenido
 alinear elementos
 alinear-contenido