HTML – CONTENEDOR

INICIAMOS FLEX BOX

Flex-direction: row;

Flex-direction: row-reverse;
Flex-direction:column;

Flex-Direction:columna-reverse;
Flex-Wrap:Nowrap;

Nota: Se rompe si sigue ingresando elementos

Flex:wrap:wrap;

Nota Al agregar wrap se van acomodando todos los hijos de los contenedores
Flex-wrap:wrap-reverse;
Flex-flow: row wrap;
Flex-flow:column no-wrap;

Nota: Union de flex wrap y flex direction

Justify-content:flex-start;

Justify-content- flex-end
Justyftt-content:center;

Justify-content:space-between;
Justify-content:space-around;

Justify-content:space-evenly;
Aling-items:flex-start;

Aling-items:flex-end;
Aling-items:center;

Aling-items:stretch;
Aling-items; baseline;
Ejemplo baseline
Aling-content:flex-start;

Aling-content:flex-end;
Aling-content:center;

Aling-content:stretch;
Aling-content:space-beetween;

Aling-content:space-around;
Ejemplos con aling-content
GAP:
Nota: sirve para modificar el orden y ayuda en temas responsive
Flex-grow:1;

Flex-grow: 2;
A TODOS LOS HIJOS ITEMS SE LES DIO EL MISMO TAMAÑO FLEX-GROW

Ejemplos
Flex-shrink

Ejemplos
Flex - basis

Nota: Si el item3 se le coloca un tamaño de 1000px y no lo llega alcanzar por

el contenedor padre, el item3 se acomodará sin necesidad de salirse de su
contenedor padre
Ejemplo

Nota: Sirve mucho para el responsive

Aling-self : flex-start;

Aling-self:flex-end;

Aling-self:flex-center;
Aling-self:stretch;

Aling-self:baseline;
Ejemplo