For anyone unfamiliar with the great CSS flexbox box-model, here’s a quick reference. For a more comprehensive guide please check CSS-Tricks on Flexbox.
.flexbox {
display: flex || inline-flex;
flex-direction: row || row-reverse || column || column-reverse;
flex-wrap: nowrap || wrap || wrap-reverse;
flex-flow: $flex-direction $flex-wrap; /* short-hand */
justify-content: flex-start || flex-end || center || space-around ||
space-between; /* horizontal justification */
align-items: flex-start || flex-end || center || stretch ||
baseline; /* vertical alignment */
}
.flexbox .el {
flex-grow: <int>; /* e.g. [1] [333] [22] */
flex-shrink: <int>; /* $flex-grow vice-versa */
flex-basis: <size> || auto;
flex: $flex-grow $flex-shrink $flex-basis; /* short-hand */
align-self: flex-start || flex-end || center || stretch ||
baseline; /* $align-items but for single element */
order: <int>;
}