[Flexbox cheatsheet] #flex

flexbox-cheatsheet.md

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