Skip to content

Instantly share code, notes, and snippets.

@dhruvdutt

dhruvdutt/flexbox-cheatsheet.md

Created May 6, 2017 09:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dhruvdutt/6bfa39476a0ac95a0ff452a3302e8935 to your computer and use it in GitHub Desktop.
Save dhruvdutt/6bfa39476a0ac95a0ff452a3302e8935 to your computer and use it in GitHub Desktop.
Download ZIP
flexbox-cheatsheet
Raw
flexbox-cheatsheet.md 
display: flex

// Main Axis
flex-direction: row (default), row-reverse, column, column-reverse

// Main Axis Alignments / Spacing
justify-content: flex-start (default), flex-end, space-around, space-between

// Cross Axis Alignments / Spacing
align-items: stretch (default), flex-start, flex-end, center, baseline

// Wrap
flex-wrap: nowrap (default), wrap, wrap-reverse

// Flex Flow: flex-direction + flex-wrap
flex-flow: row nowrap (default)

flex-direction: row;
flex-wrap: nowrap;

// Align Content: Defines how spacing is distributed along *Cross Axis*, Needs more than 1 row
align-content: flex-start
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment