Skip to content

Instantly share code, notes, and snippets.

@derek-knox
Last active May 9, 2018 16:13
Show Gist options
  • Save derek-knox/87b253a074a2f7357d2973ea0455fb2a to your computer and use it in GitHub Desktop.
Save derek-knox/87b253a074a2f7357d2973ea0455fb2a to your computer and use it in GitHub Desktop.
Flexbox Cheatsheet
.flex-container {
/* Flex context for direct children */
display: flex;
/* Main axis direction */
flex-direction: row /* | row-reverse | column | column-reverse */;
/* Main axis multiline (default flexbox restricts to single line) */
flex-wrap: nowrap /* | wrap | wrap-reverse */;
/* Main axis space distribution */
justify-content: flex-start /* | flex-end | center | space-between | space-around | space-evenly */;
/* Cross axis space distribution */
align-items: flex-start /* | flex-end | center | baseline | stretch */;
/* Cross axis lined items distribution (multiple lines) */
align-content: flex-start /* | flex-end | center | space-between | space-around | stretch */;
.flex-item {
/* Layout order */
order: 0 /* integer */;
/* Proportional space item uses to fill */
flex-grow: 0 /* integer */;
/* Proportional space item uses to shrink */
flex-shrink: 0 /* integer */;
/* Default item size prior to empty space distribution */
flex-basis: content /* any unit value | auto */;
/* Override of container's align-items */
align-self: auto /* | flex-start | flex-end | center | baseline | stretch */;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment