CSS Flexbox - A Quick Reference

flex-direction:
row | row-reverse | column | column-reverse

row

.flex__parent {
    display: flex;
    flex-direction: row;
}

row reverse

.flex__parent {
    display: flex;
    flex-direction: row-reverse;
}

column

.flex__parent {
    display: flex;
    flex-direction: column;
}

column reverse

.flex__parent {
    display: flex;
    flex-direction: column-reverse;
}

flex-wrap:
nowrap | wrap | wrap-reverse | inherit

will affect flex-items with a "width".

nowrap

.flex__parent {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

wrap

.flex__parent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

wrap-reverse

.flex__parent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
}

justify-content:
flex-start | flex-end | center | space-between | space-around

flex-start

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}

flex-end

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

center

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

space-between

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

space-around

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}

align-items:
flex-start | flex-end | center | baseline | stretch

changes invisible unless flex-container has a "height".
Exception: baseline.

flex-start

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
}

flex-end

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
}

center

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

baseline

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
}

stretch

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
}

align-content:
flex-start | flex-end | center | space-between | space-around | stretch

changes invisible unless flex-container has a "height" AND flex-item has a "width".

flex-start

.flex__parent {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

flex-end

.flex__parent {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}

center

.flex__parent {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

space-between

.flex__parent {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

space-around

.flex__parent {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

stretch

.flex__parent {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}

order:
integer

order

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child:nth-child(2) {
    order: 1;
}
.flex__child:nth-child(3) {
    order: 2;
}

order

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child:nth-child(2) {
    order: -1;
}
.flex__child:nth-child(3) {
    order: 2;
}

flex-grow:
integer

flex-grow

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child {
    flex-grow: 0;
}

flex-grow

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child {
    flex-grow: 1;
}

flex-grow

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child {
    flex-grow: 1;
}
.flex__child:nth-child(2) {
    flex-grow: 3;
}

flex-grow

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child {
    flex-grow: 1;
}
.flex__child:nth-child(2) {
    flex-grow: 20;
}

flex-shrink:
integer

flex-shrink

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child {
    flex-basis: = 16.6666667%);
    flex-grow: 0;
}

flex-shrink

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child {
    flex-basis: = 16.6666667%);
    flex-grow: 0;
}
.flex__child:nth-child(2) {
    flex-shrink: 1;
}

flex-shrink

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child {
    flex-basis: = 16.6666667%);
    flex-grow: 0;
}
.flex__child:nth-child(2) {
    flex-shrink: 2;
}

flex-shrink

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child {
    flex-basis: = 16.6666667%);
    flex-grow: 0;
}
.flex__child:nth-child(2) {
    flex-shrink: 20;
}

flex-shrink

.flex__parent {
    display: flex;
    flex-direction: row;
}
.flex__child {
    flex-basis: = 16.6666667%);
    flex-grow: 0;
}
.flex__child:nth-child(2) {
    flex-shrink: 20;
}
.flex__child:nth-child(5) {
    flex-shrink: 20;
}
.flex__child:nth-child(6) {
    flex-shrink: 40;
}

align-self:
flex-start | flex-end | center | baseline | stretch

changes invisible unless flex-container has a "height".
Exception: baseline.

flex-start

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
}
.flex__child:nth-child(2) {
    align-self: flex-start;
}
.flex__child:nth-child(4) {
    align-self: flex-start;
}
.flex__child:nth-child(6) {
    align-self: flex-start;
}

flex-end

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
}
.flex__child:nth-child(2) {
    align-self: flex-end;
}
.flex__child:nth-child(4) {
    align-self: flex-end;
}
.flex__child:nth-child(6) {
    align-self: flex-end;
}

center

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
}
.flex__child:nth-child(2) {
    align-self: center;
}
.flex__child:nth-child(4) {
    align-self: center;
}
.flex__child:nth-child(6) {
    align-self: center;
}

baseline

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
}
.flex__child:nth-child(2) {
    font-size: 1.5em;
    align-self: baseline;
}
.flex__child:nth-child(4) {
    font-size: .5em;
    align-self: baseline;
}
.flex__child:nth-child(6) {
    font-size: 2em;
    align-self: baseline;
}

stretch

.flex__parent {
    display: flex;
    flex-flow: row nowrap;
}
.flex__child:nth-child(2) {
    align-self: stretch;
}
.flex__child:nth-child(4) {
    align-self: stretch;
}
.flex__child:nth-child(6) {
    align-self: stretch;
}