Flex-Direction

Flex tiene cuatro direcciones, como: row, row-reverse, column y column-reverse

El display flex-box por defecto tiene row

Usando:


.container_row {
    height: 120px;
    background-color: blueviolet;
    display: flex;
}
Item 1
Item 2
Item 3

Row-reverse

Usando:


.container_row-reverse {
    height: 120px;
    background-color: blueviolet;
    display: flex;
    flex-direction: row-reverse;
}
Item 1
Item 2
Item 3

Al usar row-reverse los items empiezan diferente manera, por lo que se puede ordenar

Usando:


.item_row-reverse-order:nth-child(1) {
    order: 3;
}

.item_row-reverse-order:nth-child(2) {
    order: 2;
}

.item_row-reverse-order:nth-child(3) {
    order: 1;
}
Item 1
Item 2
Item 3

Column

Usando:


.container_column {
    height: 120px;
    background-color: blueviolet;
    display: flex;
    flex-direction: column;
}
Item 1
Item 2
Item 3

Column

Usando:


.container_column-reverse {
    height: 120px;
    background-color: blueviolet;
    display: flex;
    flex-direction: column-reverse;
}
Item 1
Item 2
Item 3

Column Ordenado

Usando:

.item_column-reverse-order {
background-color: cadetblue;
margin: 3px 0;
}

.item_column-reverse-order:nth-child(1) {
order: 3;
}
.item_column-reverse-order:nth-child(2) {
order: 2;
}

.item_column-reverse-order:nth-child(3) {
order: 1;
}

.item_column-reverse-order {
    background-color: cadetblue;
    margin: 3px 0;
}

.item_column-reverse-order:nth-child(1) {
    order: 3;
}

.item_column-reverse-order:nth-child(2) {
    order: 2;
}

.item_column-reverse-order:nth-child(3) {
    order: 1;
}
Item 1
Item 2
Item 3

Flex Wrap: Manda a la siguiente fila cuando no caben.

Usando:


.container-wrap {
    height: auto;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
}

.item-wrap {
    width: 150px;
    border: 1px solid black;
    background-color: cadetblue;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17