Flex Box - Cheatsheet

Container - Properties for the Parent

Create Flex Box
Defines Flex container, applying a flex context for all direct children.
.container {
display: flex;
}
.container {
display: inline-flex;
}
Flex Direction
Defines the direction in which items are placed in the Flex container.
.container {
flex-direction: row;
}
.container {
flex-direction: row-reverse;
}
.container {
flex-direction: column;
}
.container {
flex-direction: column-reverse;
}
Flex Wrap
Defines whether items should wrap onto a new line.
.container {
flex-wrap: nowrap;
}
.container {
flex-wrap: wrap;
}
.container {
flex-wrap: wrap-reverse;
}
Justify Content
Alignes the items along the main axis of the container.
.container {
justify-content: center;
}
.container {
justify-content: flex-start;
}
.container {
justify-content: flex-end;
}
.container {
justify-content: space-between;
}
.container {
justify-content: space-around;
}
.container {
justify-content: space-even;
}
Align Items
Defines the direction in which items are placed in the Flex container.
.container {
align-items: start;
}
.container {
align-items: end;
}
.container {
align-items: center;
}
.container {
align-items: stretch;
}
Align Content
Alignes the containers lines when there is extra space in the cross-axis.
.container {
align-content: center;
}
.container {
align-content: flex-start;
}
.container {
align-content: flex-end;
}
.container {
align-content: space-between;
}
.container {
align-content: space-around;
}
.container {
align-content: stretch;
}

Children - Properties for the Child

Order
Defines the order in which flex items appear.
.container {
order: 1;
}
Flex Grow
Defines the proportional amount of the available space an item takes in the flex container (default is 1).
.container {
flex-grow: 3;
}
Flex Shrink
Allows a flex item to shrink if necessary.
.container {
flex-shrink: 3;
}
Flex Basis
Defines the default size of an item before the remaining space is distributed.
.container {
flex-basis: 30%;
}
Flex
A shorthand for <flex-grow>, <flex-shrink> and <flex-basis> in one command.
.container {
flex: 1 1 100px;
}
Align Self
Overrides the default alignment (or the one specified by <align-items>) for an individual flex items. (Values: <auto>, <flex-start>, <flex-end>, <center>, <baseline> or <stretch>)
.container {
align-self: flex-end;
}