flex布局

注意：父盒子(容器)设置flex布局之后，子元素(项目)的float，clear和vertical-align属性将失效

flex布局原理：通过给父盒子添加flex属性， 来控制子盒子的位置和排列方式
display: flex inline-flex

传统布局：兼容性好，布局繁琐，局限性，不能在移动端很好的布局
flex弹性布局:操作方便，布局极为简单，移动端应用广泛，PC端浏览器支持情况较差，IE 11或更低版本，不支持或部分支持
建议：PC端页面布局----传统布局
移动端或者不考虑兼容性问题的PC端页面布局----flex弹性布局

父项属性：

父项属性：
元素跟着主轴排列（row 默认水平x轴 侧轴为y轴）
调整主轴
flex-direction: column（垂直 y轴 侧轴变为x轴）

默认情况下，项目都排在一条线（轴线）上，
flex布局中默认子元素是不换行的，
如果装不下，会缩小子元素的宽度，放到父元素里
主轴上(子项)的换行 flex-wrap

以上两个属性的复合写法

主轴上对齐方式(确定好主轴是哪一个) justify-content

侧轴（当前轴的反向）
更多的是单行 align-items

多行侧轴 align-content
只能用于子项出现换行的情况（多行）单行没有效果

子项常见属性：

flex：number 定义子项目分配剩余空间，用flex表示占多少份数
如果子项没有宽度，父项宽度为剩余空间
如果有宽度，父项宽度 - 子项宽度所剩下的为剩余空间

子项上的优先级高于父元素上的设置（可覆盖align-items）
align-self: flex-start/end;控制子项自己在侧轴的排列方式
（允许单个项目与其他项目不一样的对齐方式，
默认值为auto，表示继承父元素的align-items属性，
如果没有父元素，等同于stretch）
order:-1/0/1定义子项排列顺序（前后顺序)
数值越小排列越靠前 默认为0