.flex { display: flex; }

.flex-row { flex-direction: row; }/* 主轴为从左到右，默认值 */

.flex-col { flex-direction: column; }/* 主轴为从上到下 */

.flex-inline { display: inline-flex; }/* 行内元素使用flex布局 */

.flex-1 { flex:1; }
.flex-068 { flex:0.68; }

.flex-1p5 { flex:1.5; }

.flex-2 { flex:2; }
.flex-3 {flex: 3;}

.flex-justify-center { justify-content: center; }/* 沿主轴居中对齐 */

.flex-justify-end { justify-content: flex-end; }/* 沿主轴末尾对齐 */

.flex-align-center { align-items: center; }/* 垂直居中 */

.flex-align-start { align-items: flex-start; }/* 垂直顶部对齐 */

.flex-align-end { align-items: flex-end; }/* 垂直底部对齐 */

.flex-center { justify-content: center; align-items: center; }

.flex-between { justify-content: space-between; }/* 两端对齐 */

.flex-around { justify-content: space-around; }/* 各元素间隔相等 */

.flex-wrap { flex-wrap: wrap; }/* 子元素换行排布，第一行在上方 */