Understanding CSS Flexbox

Understanding CSS Flexbox

Flexbox is a modules in CSS3 that makes it easy to align elements to one another, in different directions and orders. The main idea behind flexbox is to give the container the ability to expand and to shrink elements to best use all the available space. Flexbox completely changes the way that we build one-dimensional layouts.

bold is a default value

Container

• flex-direction: row / row-reverse / column / column-reverse
• flex-wrap: nowrap / wrap / wrap-reverse
• justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly
• align-items: stretch / flex-start / flex-end / center / baseline
• align-content: stretch / flex-start / flex-end / center / space-between / space-around

Item

• align-self: auto / stretch / flex-start / flex-end / center / baseline
• order: 0 / <integer>
• flex-grow: 0 / <integer>
• flex-shrink: 1 / <integer>
• flex-basis: auto / <length>

Shorten hand flex

flex is a shortened property of flex-grow, flex-shrink, and flex-basis

Originally published at https://jiajiewu1988.github.io.