http://flexboxfroggy.

com/#es

1.- JUSTIFY-CONTENT

1.1.- Justify-content:flex-end

1.2.- Justify-content:flex-center

1.3.- Justify-content:space-around
1.4.- justify-content:space-between

2.- ALIGN-ITEMS

2.1.- align-items: flex-ends;

2.2.- (align y justify)
align-items:center;
justify-content:center;

2.3.-
align-items: flex-end;
justify-content: space-around;
3.- FLEX-DIRECTIONS

3.1.- flex-direction:row-reverse

3.2.- flex-direction:column
3.3.-

flex-direction:row-reverse;

justify-content:start;

3.4.- flex-direction:column;

cuando es una columna, justify-content cambia a vertical y align-items a horizontal.

justify-content :flex-end;
3.4.- flex-direction:column-reverse;

justify-content:space-between;

3.5.- flex-direction:row-reverse
justify-content:center;

align-items:flex-end;

4.- ORDER

4.1.-
.yellow{
Order:3;
}

4.2.-

.red{
Order:-1;
}

5.- ALIGN-SELF
5.1.-
.yellow{
Align-self:flex-end;
}

5.2.-

.yellow{
order: +2;
}

.yellow{
order: +2;
align-self:flex-end;
}
6.- FLEX-WRAP

6.1.- flex-wrap:wrap;

6.2.-flex-direction:column;
Flex- wrap:wrap;

Lo que es lo mismo abreviado : flex-flow: column

wrap

7.- FLEX-WRAP con ALING-CONTENT

flex-direction:column-reverse;
 align-content:center;

REMATE FINAL

flex-wrap:wrap-reverse;

flex-direction: column-reverse;

align-content:space-between;
justify-content:center;