Flexbox

Flexbox changes a container's child elements into inline, flexible elements

Flexbox is a single-direction layout concept -- direction can be either column or row

Important defaults

Direction -- Default setting is row, which is horizontal

Main Axis -- Follows direction. Because direction is row by default, the Main Axis is also horizontal

Cross Axis -- Perpendicular to Main Axis, so default is vertical

Common Flex properties

Keep in mind -- you don't have to state every property!

Flex Container ( outer div -- parent element )

CSS Property	Values	Description	Default value
`display`	`flex`	Turns the element into a Flex Container (required)	`block`
`flex-direction`	`row` `column`	Establishes the Main Axis	`row`
`justify-content`	`flex-start` `flex-end` `center` `space-around` `space-between`	Arrangement of Flex Items along the Main Axis. Defined by `flex-direction`	`flex-start`
`align-items`	`flex-start` `flex-end` `center` `stretch` `baseline`	Arrangement of Flex Items along the Cross Axis. Defined by `flex-direction`	`flex-start`
`flex-wrap`	`wrap` `nowrap`	How Flex Items behave when they can't fit on one line (due to browser size) Defined by `flex-direction`	`nowrap`
`flex-flow`	`row nowrap` `row wrap` `column nowrap` `column wrap` `row reverse` `column reverse`	Shorthand for `flex-direction` + `flex-wrap`	`row nowrap`

Note: When using stretch, height needs to be accounted fors

Important -- Changing flex-direction to column does NOT arrange the Flex Items along the container's Cross Axis. It converts the Flex Container's Main Axis from horizontal to vertical. Which means the Cross Axis becomes horizontal

justify-content still refers to Main Axis (which is now vertical)
align-items still refers to Cross Axis (which is now horizontal)

Flex Items ( inner divs -- child elements )

CSS	Values	Description	Default
`align-self`	see values for `align-items`	Override container `align-items` property	-
`order`	[number]	Control the order of appearance	Source order
(more later)

Important things to keep in mind

Most of Flexbox work is done on the Flex Container
A Flex Item can be a Flex Container to its own Flex Items (nested children)
float, clear, and vertical-align have no effect on Flex Items