1. flex布局体验
1.1传统布局与flex布局
传统布局
兼容性好
布局繁琐
不能再移动端很好的布局.
flex弹性布局
操作方便 ,布局极为简单,移动端应用很广泛
PC端浏览器支持情况较差局限性,
IE 11或更低版本,不支持或仅部分支持
建议:
1.如果是PC端页面布局,我们还是传统布局。
2.如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局
2. flex布局原理
2.1布局原理
flex是flexible Box的缩写,意为"弹性布局" ,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
注意:
当我们为父盒子设为flex布局以后,子元素的float、clear 和vertical-align属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用Flex布局的元素,称为Flex容器( flex container ) , 简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目( flex item ) , 简称"项目"。
体验中div就是flex父容器。
体验中span就是子容器flex项目
子容器可以横向排列也