Layout Cheatsheet

An Refresher of Layout Implementations

Legend

Container
Item

Centered Page Layout Options

Margin Auto

max-width: 1000px;
margin: 48px auto;

Side by Side Layout Options

Inline-Block

display: inline-block;
width: 100px;
display: inline-block;
width: 100px;

Flexbox - default behavior

display: flex;

Flexbox - flex item behavior

display: flex;
flex: 1;
flex: 2;

Center Alignment Options

Text-Align

text-align: center;
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Flexbox (row) - justify-content (center)

display: flex;
justify-content: center;

Flexbox (column) - align-items (center)

display: flex;
flex-direction: column;
align-items: center;
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Positioning Options

Apart

display: flex;
justify-content: space-between;

Custom Positioning (recommended only for large containers like heroes)

position: relative;
position: absolute;
left: 0px;
top: 25%;
position: absolute;
bottom: 0px;
right: 0px;