css3中的flex的用法详解

flex是css3中一个非常重要的属性，在布局中使用flex起到很重要的作用。例如：

1.我们想让一个子div居中用一个flex就完全搞定。

2.就是我们想让我们的布局 不管是水平布局还是垂直布局 让子元素 按比例设置宽或者高，起到异想不到作用，很方便。下面就具体介绍一下他有哪些属性和用法：

1》如果我们想使用flex，首先需要在父容器中设置：

display: flex;  --  表示使用flex布局，此时你设置的float属性等就不起作用了

flex-direction： --表示此时子div的排列方向，总共有两种水平方向（默认）row；还有竖直方向 column；

flex-wrap ： -- 表示是否换行显示nowrap不换行一行显示，wrap换行显示。

justify-content 属性定义了项目在水平方向上的对齐方式。
flex-start | flex-end | center | space-between | space-around;
align-items 属性定义项目在交叉轴上如何对齐。

 flex-start | flex-end | center | baseline | stretch;
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
2》子布局中设置：

flex：数字； ---表示此子div占父div的比例大小，与display：flex；连用。

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果某一个子div大于其他的那么有剩余空间时此div将放大

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果为0不缩小

3.举例用法：

3.1、垂直且水平居中

在父容器中设置

display: flex;
justify-content: center;align-items: center;
子容器设置宽高，就行了
3.2、设置水平的按比例排列：
父布局设置
display: flex;flex-direction: row;
子布局设置比例
flex: number; 这里每个子div都要设置此属性，number就是此div占的比例大小
具有代表性的两个例子