Flexbox cheatsheet

by @sakamies

Click a property or value to select its text. Makes it really fast to copy declarations.

The ‚óŹ means you selected something. (Click it to unselect.)

Click a selector to get the whole rule set with your selections. (Click outside the textarea or copy the text to clipboard to dismiss.)

Use tab, space, ↑↓←→ keys and copy/paste for quick keyboard action.

CSS Cheats by @workflower

.container {
display: flex; display_flex Created with Sketch.
display: inline-flex; display_inline-flex Created with Sketch.
flex-direction: row; flex-direction_row Created with Sketch.
flex-direction: row-reverse; flex-direction_row-reverse Created with Sketch.
flex-direction: column; flex-direction_column Created with Sketch.
flex-direction: column-reverse; flex-direction_column-reverse Created with Sketch.
flex-wrap: nowrap; flex-wrap_nowrap Created with Sketch.
flex-wrap: wrap; flex-wrap_wrap Created with Sketch.
flex-wrap: wrap-reverse; flex-wrap_wrap-reverse Created with Sketch.
justify-content: flex-start; justify-content_flex-start Created with Sketch.
justify-content: center; justify-content_center Created with Sketch.
justify-content: flex-end; justify-content_flex-end Created with Sketch.
justify-content: space-between; justify-content_space-between Created with Sketch.
justify-content: space-around; justify-content_space-around Created with Sketch.
align-items: flex-start; align-items_flex-start Created with Sketch.
align-items: center; align-items_center Created with Sketch.
align-items: flex-end; align-items_flex-end Created with Sketch.
align-items: stretch; align-items_stretch Created with Sketch.
align-items: baseline; align-items_baseline Created with Sketch.
align-content: flex-start; align-content_flex-start Created with Sketch.
align-content: center; align-content_center Created with Sketch.
align-content: flex-end; align-content_flex-end Created with Sketch.
align-content: space-between; align-content_space-between Created with Sketch.
align-content: space-around; align-content_space-around Created with Sketch.
align-content: stretch; align-content_stretch Created with Sketch.
}
.item {
order: 0; order_0 Created with Sketch.
flex-grow: 0; flex-grow_0 Created with Sketch.
flex-grow: 1; flex-grow_1 Created with Sketch.
flex-shrink: 0; flex-shrink_0 Created with Sketch.
flex-shrink: 1; flex-shrink_1 Created with Sketch.
flex-basis: auto;
align-self: auto; align-self_auto Created with Sketch.
align-self: flex-start; align-self_flex-start Created with Sketch.
align-self: center; align-self_center Created with Sketch.
align-self: flex-end; align-self_flex-end Created with Sketch.
align-self: baseline; align-self_baseline Created with Sketch.
align-self: stretch; align-self_stretch Created with Sketch.
}