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 */