Magic of Margins and Order

1. The order Property

Allows swapping elements. order: -1 will throw an element to the very beginning. Important: This is only a visual effect. HTML code remains unchanged.

2. Margin: Auto Trick

In Flexbox, margin: auto gains incredible power. If you want to push the last button in the menu to the right edge while keeping others on the left:

.menu-item-last {
  margin-left: auto; /* It will 'push off' from neighbors to the very edge! */
}

3. Align-self

Allows one element to " rebel " against parent's will (align-items).

.container { align-items: center; }
.rebel-child { align-self: flex-start; } /* All in center, but this one at top */