CheatDocs•

Flexbox

Container

#

display

Flex Container
display: flex;
display: inline-flex;
#

flex-direction

Flex Container
flex-direction: row;/* default */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
#

flex-wrap

Flex Container
flex-wrap: nowrap;/* default */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
#

flex-flow

Flex Container

Shorthand for [flex-direction] [flex-wrap]

flex-flow: row nowrap;/* default */
#

justify-content

Flex Container
justify-content: flex-start;/* default */
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
#

align-items

Flex Container
align-items: stretch;/* default */
align-items: flex-start;
align-items: flex-end;
align-items: start;
align-items: end;
align-items: self-start;
align-items: self-end;
align-items: center;
align-items: baseline;
align-items: first baseline;
align-items: last baseline;
#

align-content

Flex Container
align-content: stretch;/* default */
align-content: flex-start;
align-content: flex-end;
align-content: start;
align-content: end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;

Items

#

flex-grow

Positive number (or zero) representing excess space allocated to the item, relative to other items.

flex-grow: 0;/* default */
flex-grow: 2;/* example */
#

flex-shrink

Positive number (or zero) representing space removed from item, relative to other items, in order to fit all items in container.

flex-shrink: 1;/* default */
flex-shrink: 3.5;/* example */
#

flex-basis

Base length of item, before shrinking or growing according to available space.

flex-basis: 0;/* default */
flex-basis: auto;/* example */
flex-basis: 20px;/* example */
flex-basis: 25%;/* example */
#

flex

Shorthand for "none", "auto", or [flex-grow] [flex-shrink] [flex-basis]. Omitted parameters are set intelligently.

flex: 0 1 auto;/* default */
flex: none;/* example */
flex: 2 2 500px;/* example */
#

order

order: 1;/* integer representing index */
#

align-self

align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;