Flexbox Basics

Flexbox is much better for laying out elements on a page and is better than anything we have seen so far.

Flexbox is syntactic sugar for inline and block layouts. The following is a cheatsheet of the basics.

Flex Direction

You can set flex box to either align column-wise or row-wise. It is row-wise by default.

display: flex;
flex-direction: row;

display: flex;
flex-direction: column;

Justify Content

This controls how elements are laid-out on the main axis.

Flex-Start

This is the default.

justify-content: flex-start;

Flex-End

justify-content: flex-end;

Center

justify-content: center;

Space-Between

justify-content: space-between;

Space-Around

justify-content: space-around;

Space-Evenly

justify-content: space-evenly;

Align Items

This controls how items are aligned on the secondary-axis.

Flex-Start

align-items: flex-start;

Flex-End

align-items: flex-end;

Stretch

align-items: stretch;

Center

align-items: center;

Baseline

align-items: baseline;