.flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.inline-flex {
/* 內(nèi)斂元素 */
display: inline-flex;
}
.flex-item {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
/* 容器上 start*/
.direction-row {
/* (默認(rèn))主軸為水平方向替裆，起點在左端 */
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 橫向?qū)R方式 */
.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 {
/* 如果項目未設(shè)置高度或設(shè)為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 {
/* 如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度遥诉。 */
align-self: stretch;
}
/* 項目上end */
