浅谈之css flex布局

flex里面的属性：

        flex-direction：主轴方向；

        flex-wrap：是否换行；

        justify-content：主轴排列方式；

        align-items：侧轴排列方式（单行）；

        align-content：侧轴排列方式（多行）；

        flex：剩余空间分配

首先我们要使用flex布局的时候，这些属性是中除了最后一个flex其他都是放在父元素上的；

flex-direction表明元素要排列对齐的方向，是横着排列还是竖着排列；

flex-wrap：表示我们是否换行，在flex中如果我们没有定义这个属性为允许，那么当我们添加盒子到总宽度超过父盒子的宽度的时候就会出现，我们设置的子盒子的宽度没用自动缩小；同时我们在后面的设置侧轴的时候没有flex-wrap就只可以使用align-items

align-items：  align-content：侧轴的排列，当我们主轴为row的时候我们侧轴就是column；然后就是子元素在侧轴上面的排列方式；

flex：数字；我们这里可以用来实现前端中的双飞翼布局，将左右元素固定后对中间的子元素设定flex：1剩下多余的空间就给了中间盒子。

flex布局实现居中：

主轴的排列设置为center，侧轴的排列也设置为center就可以了

father{

display：flex；

flex-direction：row；

justify-content：center；

align-center:center;

}