whyofflexbox——为什么长期使用flex，网页布局是比较难的地方。使用float和position实现居中、两栏、三栏等布局。然而CSS并没有正式的布局方案，终于出现了新的布局方案。what——什么是flex？Flex是灵活的盒子布局。既然是柔性的，就意味着可以达到自适应的目的。根据我的理解，flex布局主要有两个部分需要注意。使用弹性布局的元素称为弹性容器元素，弹性容器元素内部的元素称为子元素。flex布局的所有属性也可以分为两类，一部分应用于容器元素，另一部分应用于子元素。借用MDN的一张图，首先flex布局是二维的，就像平面笛卡尔坐标系一样，会有X轴和Y轴，所以display:flex容器元素设置有水平mainaxis（主轴）默认如图所示。还有垂直的交叉轴（crossaxis），当然也可以设置为主轴为垂直的交叉轴为水平的。与主轴和交叉轴相关的是主要尺寸和交叉尺寸。主尺寸是单个子元素在主轴上所占的空间，交叉尺寸是单个子元素在横轴上所占的空间。How——如何使用flex首先梳理一下属性分为两类：作用于容器元素的有7个：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content,place-content,其实容器元素上还有一个display:flex/inline-flex属性作用于子元素,有6个:align-self,order,flex-grow,flex-shrink,flex-basis,flexps：届时设置flex布局后，子元素的float、clear、vertical-align属性将失效。容器元素属性显示：flex|inline-flex设置flex生成块级容器元素；inline-flex生成行级容器元素flex-direction:row|行反转|栏目|column-reverse设置主轴的方向，会影响子元素在主轴上的排列方向。默认是rowflex-wrap:nowrap|包装|wrap-reverse当主轴尺寸固定，子元素无法排列时space-between|space-around|space-evenly决定了子元素在主轴上的对齐方式align-items:flex-start|flex-end|center|baseline|stretch决定了子元素在横轴上的对齐方式。align-content:flex-start|flex-end|center|space-between|space-around|当子元素只有一个轴时，该属性不起作用，以默认的主轴为例，如果有子元素太多而出现换行，子元素有多个轴。align-items设置就是这些多个轴的对。方法同justify-content和align-items。place-content：是align-content和justify-content的缩写子元素属性顺序：子元素排列顺序容器元素。值越小排列越高，默认为0，可以取负值。对齐自我：自动|，但仅针对单个子元素flex-basis:auto|<长度>flex-shrink:
