.box{
display:flex;
//布局方向
flex-direction:row | row-reverse | column | column-reverse; 從左只有橫向布局|從右到左橫向布局|從上到下縱向布局|從下到上縱向布局
//是否換行
flex-wrap:nowrap | wrap | wrap-reverse; 不換行|換行|第二行在上
//主軸上內容對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around; 起點對齊|終點對齊|居中|兩邊對其|每個項目兩側的間隔相等
//交叉軸上對齊方式
align-items: flex-start | flex-end | center | baseline | stretch(默認值);起點對齊|終點對齊|居中|項目的第一行文字的基線對齊|如果項目未設置高度或設為auto,將占滿整個容器的高度
//多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
.flex{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}
.flex-v{
-webkit-box-orient:vertical;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}
.flex-1{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
.flex-align-center{
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}
.flex-pack-center{
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
}
.flex-pack-justify{
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
.item{
//項目的排列順序。數值越小,排列越靠前,默認為0。
order: <integer>;
//項目的放大比例,默認為0,即如果存在剩余空間,也不放大。
flex-grow: <number>; //default 0
//項目的縮小比例,默認為1,即如果空間不足,該項目將縮小
flex-shrink: <number>;//default 1
//在分配多余空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小
flex-basis: <length> | auto; //default auto
//flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。后兩個屬性可選
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
//允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
}