Flexbox

Flexbox viene de “Flexible Box Layout“, que se puede traducir como “Diseño de caja flexible“, y nos aporta una magnífica solución para todos nuestros desarrollos “responsive”.

Lo que nos permite es crear un conjunto de elementos flexibles que se adaptan automáticamente a su contenedor y con el que podemos controlar parámetros tales como la alineación, dirección (horizontal/vertical).

Flex Steps

Display

1
Añadimos flex al contenedor

helper flex	Description
`.is-flex`	Convierte el contenedor en flexbox

Activamos flex en el contenedor

.is-flex

2
Añadimos Atributos de distribución o alineado al contenedor

Inicializando Flexbox

Tipos de clases

Dirección	Agrupación	Distribución	Alineación	Múltiple
Dirección horizontal .flex-row	Flex-wrap .flex-wrap	Contenido al inicio .content-start	Align top .align-top	Alineación al top .align-multi-top
Dirección Vertical .flex-column	Flex-nowrap .flex-nowrap	Contenido al final .content-end	Align middle .align-middle	Alineación al bottom .align-multi-bottom
		Contenido centrado .content-center	Alineación al bottom .align-bottom	Alineación al centro .align-multi-center
		Contenido entre .content-sp-between		distribución between .align-multi-between
		Contenido alrededor .content-sp-around		Alineación around .align-multi-around
		justificado .content-sp-evenly		Alineación stretch .align-multi-stretch

Flexbox

1 Añadimos flex al contenedor

2 Añadimos Atributos de distribución o alineado al contenedor

Dirección horizontal

Flex-wrap

Contenido al inicio

Align top

Alineación al top

Dirección Vertical

Flex-nowrap

Contenido al final

Align middle

Alineación al bottom

Contenido centrado

Alineación al bottom

Alineación al centro

Contenido entre

distribución between

Contenido alrededor

Alineación around

justificado

Alineación stretch

3 Añadimos Atributos de orden, tamaño a los hijos

1
Añadimos flex al contenedor

2
Añadimos Atributos de distribución o alineado al contenedor

3
Añadimos Atributos de orden, tamaño a los hijos