一、Flex布局是什么
Flex(Flexible Box的简写)，即“弹性布局”，可以简便、快捷的实现各种复杂布局。实现flex布局，首先需要申明display: flex或者display:inline-flex;
当设置元素的display:flex后，子元素的float、clear和vertical-align属性将失效。
二、Flex布局的6个属性
1、flex-direction：该属性决定主轴的方向。可取的值有：row | row-reverse | column | column-reverse
2、flex-wrap：决定元素是否支持换行。可取的值有：nowrap（默认值） | wrap | wrap-reverse，其中， wrap-reverse会换行，但是第一行会在最下面。
3、flex-flow：flex-direction和flex-wrap的简写，等于flex-flow：[ flex-direction ] || [ flex-wrap ]。
4、justify-content：决定了元素内容的对齐方式。可取的值有：flex-start | flex-end | center | space- between | space-around。
flex-start：默认值，即头部对齐。
flex-end：即尾部对齐。
center：即居中对齐。
space-between：元素内容两端对齐，中间等间距分开。
space-betweenspace-around：元素内容等间距分开。
space-around5、align-items
：决定了元素在交叉轴方向的对齐方式。可取的值有：flex-start | flex-end | center | baseline | stretch。
flex-start：即顶端对齐。
flex-end：即低端对齐。
center：交叉轴方向上居中对齐。
baseline：第一行文字的基线对齐。
stretch（默认值）：如果元素未设置高度，则占满整个容器。
6、align-content：当元素存在多条轴线时，并且flex-wrap:wrap时，设置多条轴线之间的对齐方式。可能的取值有：flex-start | flex-end | center | space-between | space-around | stretch。
flex-start：即头部对齐。
flex-end：即尾部对齐。
center：即居中对齐。
space-between：元素内容两端对齐，中间等间距分开。
space-betweenspce-around：元素内容等间隔分开。
spce-aroundstretch（默认值）：如果元素未设置高度，则占满整个容器。
二、Flex项目的6个属性
1、order：该值的大小决定了元素的排列顺序。值越小，元素越靠前。
代码效果图2、flex-grow
：该值的大小决定了元素分配剩余空间的大小，默认值为0，即存在剩余空间也不会放大。
代码效果图3、flex-shrink：该值的大小决定了当空间不足时，元素的缩小比例。默认值为1，当空间不足时，元素将 缩小，如果值为0时，则即使空间不足也不会缩小（前提是flex-wrap:nowrap）。
代码效果图4、flex-basis
：作用于flex-item，作用和width差不多，为了规范和统一，所以用这种形式写。如果同时设 置了flex-basis和width，flex-basis起作用。
5、flex：该属性是flex-grow、flex-shrink和flex-basis的缩写，默认值是0 1 auto。
