父級設(shè)置flex

.flex{
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flexbox;
    display:flex
}

主軸排列方向，X軸和Y軸

.flex-x{
    -webkit-box-direction: normal;
    -webkit-box-orient:horizontal;
    -moz-flex-direction:row;
    -webkit-flex-direction:row;
    flex-direction:row
}
.flex-y{
    -webkit-box-direction:normal;
    -webkit-box-orient:vertical;
    -moz-flex-direction:column;
    -webkit-flex-direction:column;
    flex-direction:column
}

確認主軸情況下的對齊方式
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等
space-around：每個項目兩側(cè)的間隔相等，項目之間的間隔比項目與邊框的間隔大一倍。

.flex-x-start{
    -webkit-box-pack:start;
    -moz-justify-content:flex-start;
    -webkit-justify-content:flex-start;
    justify-content:flex-start
}
.flex-x-center{
    -webkit-box-pack:center;
    -moz-justify-content:center;
    -webkit-justify-content:center;
    justify-content:center
}
.flex-x-end{
    -webkit-box-pack:end;
    -moz-justify-content:flex-end;
    -webkit-justify-content:flex-end;
    justify-content:flex-end
}
.flex-x-between{
    -webkit-box-pack:justify;
    -moz-justify-content:space-between;
    -webkit-justify-content:space-between;
    justify-content:space-between
}
.flex-x-around{
    -webkit-box-pack:around;
    -moz-justify-content:space-around;
    -webkit-justify-content:space-around;
    justify-content:space-around
}

設(shè)置交叉軸上對齊方式，且在只有一根軸線情況下，即不設(shè)置換行
flex-start：交叉軸的起點對齊
flex-end：交叉軸的終點對齊
center：交叉軸的中點對齊

.flex-y-start{
    -webkit-box-align:start;
    -moz-align-items:flex-start;
    -webkit-align-items:flex-start;
    align-items:flex-start
}
.flex-y-center{
    -webkit-box-align:center;
    -moz-align-items:center;
    -webkit-align-items:center;
    align-items:center
}
.flex-y-end{
    -webkit-box-align:end;
    -moz-align-items:flex-end;
    -webkit-align-items:flex-end;
    align-items:flex-end
 }

換行

flex-wrap: nowrap | wrap | wrap-reverse  第一行在下方;
//兼容寫法
 -webkit-flex-wrap: wrap;
 -moz-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 -o-flex-wrap: wrap;
 flex-wrap:wrap;

多軸情況下的排列方式，即設(shè)置換行
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
//兼容寫法
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content:  flex-start;

所有代碼，復(fù)制即可，未包含多軸情況

.flex{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex}
.flex-x{-webkit-box-direction:normal;-webkit-box-orient:horizontal;-moz-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}
.flex-y{-webkit-box-direction:normal;-webkit-box-orient:vertical;-moz-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}
.flex-x-start{-webkit-box-pack:start;-moz-justify-content:flex-start;-webkit-justify-content:flex-start;justify-content:flex-start}
.flex-x-center{-webkit-box-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}
.flex-x-end{-webkit-box-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}
.flex-x-between{-webkit-box-pack:justify;-moz-justify-content:space-between;-webkit-justify-content:space-between;justify-content:space-between}
.flex-x-around{-webkit-box-pack:around;-moz-justify-content:space-around;-webkit-justify-content:space-around;justify-content:space-around}
.flex-y-start{-webkit-box-align:start;-moz-align-items:flex-start;-webkit-align-items:flex-start;align-items:flex-start}
.flex-y-center{-webkit-box-align:center;-moz-align-items:center;-webkit-align-items:center;align-items:center}
.flex-y-end{-webkit-box-align:end;-moz-align-items:flex-end;-webkit-align-items:flex-end;align-items:flex-end}