Flexbox Interactive

justify-content values

Work
About
Contact
justify-content: flex-start;

align-items values

Short
Taller
item
Tallest
item
here
align-items: stretch;

flex-direction + flex-wrap

Oil
Watercolor
Digital
Charcoal
Mixed
flex-direction: row; flex-wrap: nowrap;

The sidebar layout

Drag the bottom-right corner to resize. When there isn't enough room, the main content wraps below the sidebar:

Sidebar
flex-basis: 15rem
flex-grow: 1
Main Content
flex-grow: 999
min-width: 60%

This demo uses JavaScript for the interactive controls. The CSS concepts being demonstrated don't require JavaScript.