flex.css

.flex { display: -webkit-box; display: -webkit-flex; display: flex; }

.inline-flex { /* 内敛元素 */ display: inline-flex; }

.flex-item { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }

/* 容器上 start*/

.direction-row { /* (默认)主轴为水平方向，起点在左端 */ flex-direction: row; }

.direction-row-reverse { /* 主轴为水平方向，起点在右端 */ flex-direction: row-reverse; }

.direction-column { /* 主轴为垂直方向，起点在上沿 */ flex-direction: column; }

.direction-column-reverse { /* 主轴为垂直方向，起点在下沿。*/ flex-direction: column-reverse; }

.flex-nowrap { /* flex不换行 */ flex-wrap: nowrap; }

.flex-wrap { /* flex第一行在上方 */ flex-wrap: wrap; }

.flex-wrap-reverse { /* flex第一行在下方 */ flex-wrap: wrap-reverse; }

/* justify 横向对齐方式 */

.justify-start { /* 左对齐 */ justify-content: flex-start; }

.justify-end { /* 右对齐 */ justify-content: flex-end; }

.justify-center { /* 居中 */ justify-content: center; }

.justify-between { /* 等宽排列 */ justify-content: space-between; }

.justify-around { /* 分散排列*/ justify-content: space-around; }

/* align 上下对齐方式 */

.align-start { /* 上对齐 */ align-items: flex-start; }

.align-end { /* 下对齐 */ align-items: flex-end; }

.align-center { /* 上下居中 */ align-items: center; }

.align-baseline { /* 项目的第一行文字的基线对齐 */ align-items: baseline; }

.align-stretch { /* 如果项目未设置高度或设为auto，将占满整个容器的高度。 */ align-items: stretch; }

/* 容器上 end*/

/* 项目上start */

.align-self-auto { /* 继承父元素排列方式 */ align-self: auto; }

.align-self-start { /* 上对齐 */ align-self: flex-start; }

.align-self-end { /* 下对齐 */ align-self: flex-end; }

.align-self-center { /* 上下居中 */ align-self: center; }

.align-self-baseline { /* 项目的第一行文字的基线对齐 */ align-self: baseline; }

.align-self-stretch { /* 如果项目未设置高度或设为auto，将占满整个容器的高度。 */ align-self: stretch; }

/* 项目上end */