Skip to content

Instantly share code, notes, and snippets.

@richgcook
Last active March 4, 2016 13:31
Show Gist options
  • Save richgcook/ef0f04b8bc1ab5c1c8e9 to your computer and use it in GitHub Desktop.
Save richgcook/ef0f04b8bc1ab5c1c8e9 to your computer and use it in GitHub Desktop.
Flexbox doc
#element {
justify-content: flex-start, flex-end, center, space-around, space-between; // Aligns left/right
}
#element {
align-items: flex-start, flex-end, center, baseline, stretch; // Aligns top/bottom
}
#element {
align-content: flex-start, flex-end, center, space-around, space-between, stretch; // Aligns all content top/bottom
}
#element {
flex-direction: row, row-reverse, column, column-reverse; // Direction items are placed (top/bottom or left/right)
}
#element {
order: -2,-1,0,1, 2, 3, 4 etc; // Specifies order of the item
}
#element {
align-self: flex-start, flex-end, center, baseline, stretch; // Overrides align-items for specific item
}
#element {
flex-wrap: nowrap, wrap, wrap-reverse; // Whether items can be on single line or multiple lines
}
#element {
flex-flow: row, wrap (for example); // Combines flex-wrap and flex-direction into one shorthand property
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment