FLEXBOX LESS MIXINS

Just flex. No floats, inline-box or other layout hacks here.

• Item 1
• Item 2
• Item 3

Fill the space evenly.

• Item 1
• Item 2
• Item 3

Make them into columns instead of rows.

• Item 1
• Item 2
• Item 3

Fill the space with the first expanding one part, the second three and the third by two.

• Item 1
• Item 2
• Item 3

Align content to the vertical center.

• Item 1
• Item 2
• Item 3

Align content to the horizontal center.

• Item 1
• Item 2
• Item 3

Align content to both centers.

• Item 1
• Item 2
• Item 3

Change the item order without touching the mark-up.

• Item 1
• Item 2
• Item 3

Align content to the end or in this case the right.

• Item 1
• Item 2
• Item 3

Create even space between taking content length into consideration.

• Item 1
• Item 2 with more content.
• Item 3 with even more content to allow for in space.