flex布局

flex布局是Css3中增加的一种页面元素布局方式，相较于float，position，column，flex的布局优点个人认为真的是太方便。

flex布局中主要分为两类元素，即父元素和子元素。

下面记录的是常用的flex布局需要的样式；

要使用flex布局，在父元素中添加css样式

1

display: flex;

那么父元素中所有直接子元素都会排成一行；

有时，也需要子元素在父元素中居中显示，包括水平居中，垂直居中；此时，可以添加样式justify-content: center;和align-items: center;这样就可以让元素在水平方向、垂直方向居中。效果如下：

justify-content还有其他几个常用的几个属性，即space-between、space-around。前者表示平均分配子元素之间的空间，后者表示在前者的基础上，靠近父元素边界的子元素距离父元素边界同样会有二分之一的距离。

同样，可以设置align-content: center;设置多行垂直对齐方式为居中

当然，也可以让其主轴改为Y轴；即设置`flex-direction: column; 添加该样式后的效果就是下图

在主轴为X轴的时候也存在有子元素超出换行的需求，这时需要设置样式flex-wrap: wrap;即

相较于父元素，子元素上设置相应样式可以直接控制子元素的相关属性；

1. flex-grow：1；定义放大比例；把一行分为10分，那么行内子元素占几份就可以设置为几，这样可以直接控制子元素的大小；
2. flex-shrank： 1；定义缩小比例；同flex-grow一样；
3. align-self：center；定义该子元素的对齐方式，可以覆盖align-items；

当然，flex布局也有和border一样的写法；

• flex-flow：xx；是flex-direction和flex-wrap的简写
• flex：xx；是flex-grow、flex-shrank和flex-basis的简写