box-align:justify;
/*————————————————————-*/
/*定义了伸缩项目放置在伸缩容器的方向*/
flex-direction:row;
-webkit-flex-direction:row;
/*定义伸缩容器里是单行还是多行显示*/
flex-wrap:nowrap;
/*flex-direction”和“flex-wrap”属性的缩写版本,默认row nowrap*/
flex-flow:row nowrap;
/*设置伸缩容器在横向方向上的对齐方式。*/
justify-content:center;
/*设置伸缩容器在纵向方向上的对齐方式。*/
align-items:center;
/*当伸缩容器的纵向还有多余空间时，可以用来调准伸缩容器横向在伸缩容器里的对齐方式*/
align-content:center;
}
/*子级*/
.warp .modular{
width:80px;
height:80px;
background-color:#eee;
text-align:center;
/*设置伸缩项目出現的順序。*/
order:-1;
/*设置伸缩项目扩展的比例。*/
flex-grow:1;
/*设置伸缩项目收缩的比例。*/
flex-shrink:2;
/*设置伸缩项目的伸缩基准值。*/
flex-basis:auto;
/*flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写*/
flex:1 2 100px;
/*用来在单独的伸缩项目上覆写默认的对齐方式。*/
align-self:center;
}
直接上代码，写了个Demo便于理解,其中warp为父元素，称为“伸缩容器，modular为子元素，称为“伸缩项目”。
1) Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。
2) 目前没有浏览器支持 box-flex 属性，Firefox 支持替代的 -moz-box-flex 属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
