移动端开发之flex布局体验
传统布局与flex布局传统布局
兼容性好
布局繁琐
局限性,不能再移动端很好的布局
flex布局
操作方便,布局极为简单,移动端应用很广泛
PC端浏览器支持情况较差
IE11或者更低版本,不支持或仅部分支持
建议如果是PC端页面布局,我们还是传统布局
如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局
flex布局体验
HTML结构
1
1
1
css样式
span直接给宽度和高度,背景颜色
给div只需要添加“display:flex”即可
flex布局原理flex是flexible Box的缩写,意为"弹性布局" ,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后,子元素的float、 clear和 vertical-align属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
flex布局原理采用Flex布局的元素,称为Flex容器(flex container) ,简称容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item) ,简称"项目"。
体验中div就是flex父容器。
体验中span就是子容器flex项目
子容器可以横向排列也可以纵向排列
总结
flex布局原理