Darek Kay's picture
Darek Kay
Solving web mysteries

Flexbox Cheatsheet

Flex Container

display: flex;
display_flex
display: inline-flex;
display_inline-flex
flex-flow: row nowrap; (flex-direction flex-wrap)
flex-direction_row
flex-direction: row-reverse;
flex-direction_row-reverse
flex-direction: column;
flex-direction_column
flex-direction: column-reverse;
flex-direction_column-reverse
flex-wrap: nowrap;
flex-wrap_nowrap
flex-wrap: wrap;
flex-wrap_wrap
flex-wrap: wrap-reverse;
flex-wrap_wrap-reverse
justify-content: flex-start;
justify-content_flex-start
justify-content: center;
justify-content_center
justify-content: flex-end;
justify-content_flex-end
justify-content: space-between;
justify-content_space-between
justify-content: space-around;
justify-content_space-around
align-items: stretch;
align-items_stretch
align-items: flex-start;
align-items_flex-start
align-items: center;
align-items_center
align-items: flex-end;
align-items_flex-end
align-items: baseline;
align-items_baseline
align-content: stretch;
align-content_stretch
align-content: flex-start;
align-content_flex-start
align-content: center;
align-content_center
align-content: flex-end;
align-content_flex-end
align-content: space-between;
align-content_space-between
align-content: space-around;
align-content_space-around
place-content: center start;
(align-content justify-content)

Flex Item

order: 0;
order_0
flex: 0 1 auto; (flex-grow flex-shrink flex-basis)
flex-grow_0
flex-grow: 1;
flex-grow_1
flex-shrink_0
flex-shrink: 1;
flex-shrink_1
flex-basis: auto;
align-self: auto;
align-self_auto
align-self: flex-start;
align-self_flex-start
align-self: center;
align-self_center
align-self: flex-end;
align-self_flex-end
align-self: baseline;
align-self_baseline
align-self: stretch;
align-self_stretch

Resources

This cheatsheet is based on css-cheats by @sakamies.

Flexbox Cheatsheet