Flexbox Cheatsheet

flexbox-cheatsheet.md

Flexbox

display: flex;

A short cheatsheet for flexbox. Assembled from w3schools and MDN.

flex-direction

value	description
row	Default value. The flexible items are displayed horizontally, as a row
row-reverse	Same as row, but in reverse order
column	The flexible items are displayed vertically, as a column
column-reverse	Same as column, but in reverse order

justify-content

value	description
flex-start	Default value. Items are positioned at the beginning of the container
flex-end	Items are positioned at the end of the container
center	Items are positioned at the center of the container
space-between	Items are positioned with space between the lines
space-around	Items are positioned with space before, between, and after the lines

align-items

value	description
stretch	Default. Items are stretched to fit the container
center	Items are positioned at the center of the container
flex-start	Items are positioned at the beginning of the container
flex-end	Items are positioned at the end of the container
baseline	Items are positioned at the baseline of the container

flex-wrap

value	description
nowrap	Default value. Specifies that the flexible items will not wrap
wrap	Specifies that the flexible items will wrap if necessary
wrap-reverse	Specifies that the flexible items will wrap, if necessary, in reverse order

align-content

value	description
stretch	Default value. Lines stretch to take up the remaining space
center	Lines are packed toward the center of the flex container
flex-start	Lines are packed toward the start of the flex container
flex-end	Lines are packed toward the end of the flex container
space-between	Lines are evenly distributed in the flex container
space-around	Lines are evenly distributed in the flex container, with half-size spaces on either end

flex-flow

flex-flow: <flex-direction> <flex-wrap>;

Flex Item Properties

order: <number>;                 /* Default: 0. Specifies order relative to other items */
align-self: <align-items value>; /* Overrides align-items value set by parent */

flex: <flex-grow> [flex-shrink] [flex-basis];

flex-grow: <number>;           /* Default: 0. The fraction of space the item is given to grow */
flex-shrink: <number>;         /* Default: 1. How much this item will shrink compared to other items */
flex-basis: content | <width>; /* Default: content. Complex, follow link below */

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis