Skip to content

Instantly share code, notes, and snippets.

@bmbergh

bmbergh/Flexbox_cheat_sheet.markdown Secret

Last active December 12, 2018 02:11
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save bmbergh/4a6bdaa3870ba8945aa54bffa734362e to your computer and use it in GitHub Desktop.
Save bmbergh/4a6bdaa3870ba8945aa54bffa734362e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Flexbox_cheat_sheet.markdown

Choose the main axis:

flexDirection: 'column' || 'row'

Align the main axis:

justifyContent: 'flex-start' || 'flex-end' || 'center' || 'space-around' || 'space-between'

Align the cross axis:

alignItems: 'flex-start' || 'flex-end' || 'center' || 'stretch'

Align individual elements:

alignSelf: 'flex-start' || 'flex-end' || 'center' || 'stretch' || 'auto'

Give it a wrap:

flexWrap: 'wrap' || 'nowrap'

Define relative fluidity of an element:

flex: number (e.g. 1, 1/2)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment