.flex{display: flex;}

.flex-left{display: flex;justify-content: flex-start;}
.flex-center{display: flex;justify-content: center;}
.flex-right{display: flex;justify-content: flex-end;}
.flex-between{display: flex;justify-content: space-between;}
.flex-around{display: flex;justify-content: space-around;}

.flex-middle{display: flex;align-items: center;}
.flex-start{display: flex;align-items: flex-start;}
.flex-end{display: flex;align-items: flex-end;}
.flex-baseline{display: flex;align-items: baseline;}
.flex-stretch{display: flex;align-items: stretch;}

.flex-ac-middle{display: flex;align-content: center;}
.flex-ac-start{display: flex;align-content: flex-start;}
.flex-ac-end{display: flex;align-content: flex-end;}
.flex-ac-between{display: flex;align-content: space-between;}
.flex-ac-around{display: flex;align-content: space-around;}
.flex-ac-stretch{display: flex;align-content: stretch;}

.flex-wrap{display: flex;flex-wrap: wrap;}
.flex-nowrap{display: flex;flex-wrap: nowrap;}
.flex-reverse{display: flex;flex-wrap: wrap-reverse;}

.flex-d-row{display: flex;flex-direction: row}
.flex-d-rreverse{display: flex;flex-direction: row-reverse}
.flex-d-column{display: flex;flex-direction: column}
.flex-d-creverse{display: flex;flex-direction: column-reverse}

.flex-1{flex-grow: 1;}
.flex-2{flex-grow: 2;}
.flex-3{flex-grow: 3;}
.flex-4{flex-grow: 4;}
.flex-5{flex-grow: 5;}
.flex-6{flex-grow: 6;}
.flex-7{flex-grow: 7;}
.flex-8{flex-grow: 8;}
.flex-9{flex-grow: 9;}
.flex-10{flex-grow: 10;}

.flex1{flex: 1;}