[ flex ]
display: -webkit-flex;
display: -webkit-flex;
[ flex-direction ]
flex-direction: row; /*default*/
display: -webkit-flex;
flex-direction: row-reverse;
display: -webkit-flex;
flex-direction: column;
display: -webkit-flex;
flex-direction: column-reverse;
display: -webkit-flex;
[ flex-wrap ]
-webkit-flex-wrap: nowrap; /* default */
display: -webkit-flex;
width: 400px
-webkit-flex-wrap: wrap
display: -webkit-flex;
width: 400px
-webkit-flex-wrap: wrap-reverse
display: -webkit-flex;
width: 400px
[ flex-flow ]: flex-direction flex-wrap; /* 自个体会吧 */
[ justify-content ]
/* 效果如同 float:left; */
justify-content: flex-start; /* default */
display: -webkit-flex;
/* 效果如同 float:right; */
justify-content: flex-end;
display: -webkit-flex;
/* 第三代水平居中方案 */
justify-content: center;
display: -webkit-flex;
justify-content: space-between;
display: -webkit-flex;
justify-content: space-around;
display: -webkit-flex;
[ align-self ]
display: -webkit-flex;
[ align-items ]
align-items: flex-start; /* default */
display: -webkit-flex;
align-items: flex-end;
display: -webkit-flex;
/* 第三代垂直居中 */
align-items: center;
display: -webkit-flex;
align-items: baseline;
display: -webkit-flex;
align-items: stretch;
display: -webkit-flex;
[ align-content ]
/* 对比 align-items*/
align-items: flex-start
display: -webkit-flex;
align-content: flex-start;
display: -webkit-flex;
align-content: flex-end;
display: -webkit-flex;
align-content: center;
display: -webkit-flex;
align-content: space-between;
display: -webkit-flex;
align-content: space-around;
display: -webkit-flex;
align-content: stretch; /*default*/
display: -webkit-flex;
[ order ]
display: -webkit-flex;