Flexbox

Visual in-class guide

CSS Tricks Flexbox reference

Flexbox Froggy

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