flex布局
flex布局
传统布局的优点：兼容性好，布局繁琐，局限性，不能在移动端很好的布局
flex弹性布局优点：
1.操作方便，布局极为简单，移动端应用很广泛
2.PC端浏览器支持情况较差
3.IE11或更低版本，不支持或仅部分支持
建议：如果是PC端页面布局，我们还是传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局
布局原理
flex是flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局
当我们为父盒子设为flex布局以后，子元素的float,clear和vertical-align属性将失效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
采用了Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为Flex项目（flex item），简称“项目”。
总结flex布局原理：就是通过父盒子添加flex属性，来控制子盒子的位置和排列方式
flex布局父项常见属性
display:flex|inline-flex
flex-direction:row|row-reverse|column|column-reverse;主轴方向
flex-wrap:wrap|nowrap|wrap-reverse;设置伸缩子元素在缩小窗口时是否换行
justify-content:flex-start|flex-end|center|space-between|space-around 设置元素排列方式
align-item:flex-start|flex-end|center|base-line|stretch 侧轴
align-content:flex-start|flex-end|center|space-between|space-around|stretch 设置伸缩子元素在缩小窗口时是否换行
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap