flexbox 布局

flexbox 布局是什么，全称为flexible Box ，意为’弹性布局’。主要给容器控制项目宽高，自动适应窗口的大小。为盒型布局提供最大的灵活性。容器中使用flexbox后，float ,clear 和vertical-align 将失效。以下列出flex常用属性及作用
定义一个容器如下：
.class{
display:-webkit-box;
display:-webkit-flex;
display:flex;
}
flexbox 属性：如下所示。
1.flex-direction: 排列方向 row | column | row-reverse | column-reverse;
2.flex-wrap: 是否换行 nowrap | wrap | wrap-reverse;
3.justify-content:子元素对齐方式。 flex-start | flex-end| center | space-between | space-round 如：(-webkit-justify-content;flex-start).
4.align-items : 主轴对齐方式。flex-start | flex-end | center | baseline | stretch;
5.align-content: 侧轴对齐方式。flex-start | flex-end | center | space-between | space-around | stretch; 和justify-content 相似。

flex 项目属性，即使用子元素的属性。
1.order: 整数值 。控制flex项目的顺序。
2.flex-grow:非数数值。定义一个flex项目的扩大比例。可以扩大到满容器可用空间。
3.flex-shrink:非数数值.与flex-grow相反。
4.flex-basis:分配剩余空间默认尺寸。要取决于flex-direction的值。
5.flex: flex-grow | flex-shrink | flex-basis , 如：.class{ flex: none | [<’flex-grow’> <’flex-shrink’> ? || <’flex-basis’>] }
6.flex:常见值 flex: 0 auto; flex: initial; flex:0 1 auto;

伸缩尺寸
1.align-self; 让某一子元素使用单独对齐方式 auto | flex-start | center | baseline | stretch;
浏览器支持度：
1.IE10以上 - ms - flex
2.FF - moz - box - flex
3. Safart 和 chrome - webkit- box -flex