Order
Ordena las cajas.
Entrando en los hijos se le agrega: order: 1.
Por defecto las demás cajas agarran la posición 0.
.containerOrder {
height: 120px;
background-color: blueviolet;
display: flex;
}
.itemOrder {
border: 1px solid black;
background-color: cadetblue;
}
.itemOrder:nth-child(2) {
order: 1;
}
.itemOrder:nth-child(5) {
order: 2;
}
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
Align Self
Ordena las cajas.
Sobreescribe el valor de align-item.
Por se debe entrar directo en los hijos.
.containerAlign-Self {
height: 120px;
background-color: blueviolet;
display: flex;
}
.itemAlign-Self {
border: 1px solid black;
background-color: cadetblue;
}
.itemAlign-Self:nth-child(2) {
align-self: flex-start;
}
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