Flex Direction & Wrap

Flex Direction & Wrap

The flexbox system controls the main axis, wrapping, alignment, ordering, and growing/shrinking of items.

Display flex

flex sets display: flex (or inline-flex):

<div class="flex">...</div>

Flex direction

Controls whether items lay out in a row or column:

flex-row makes items sit side by side (main axis = horizontal); flex-col stacks them vertically (main axis = vertical).

<div class="flex flex-col">
  <span>One</span>
  <span>Two</span>
</div>

Flex wrap

<div class="flex flex-wrap">
  <!-- items will wrap instead of overflowing -->
</div>

Main axis vs cross axis

• justify-* aligns along the main axis.
• items- and content- align along the cross axis.
• In flex-row, the main axis is horizontal; in flex-col, vertical.

TL;DR

• flex to enable flexbox.
• flex-row / flex-col choose the main axis.
• flex-wrap lets items wrap onto new lines.
• Justify controls main axis; items/content control cross axis.