--------------------- flex布局 ------------------
1.1 传统布局与flex布局
1. 传统布局
- 兼容性好
- 布局繁琐
- 局限性,不能再移动端很好的布局
2. flex 弹性布局
- 操作方便,布局极为简单,移动端应用很广泛
- PC 端浏览器支持情况较差
- IE 11或更低版本,不支持或仅部分支持
建议:
- 如果是PC端页面布局,我们还是传统布局。
- 如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局
--------------------- flex布局原理------------------
2.1 布局原理
1. flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。
- 当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
2. 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
- div 就是 flex父容器。
- div 中的 span 就是 子容器 flex项目
- 子容器可以横向排列也可以纵向排列
3. 总结flex布局原理:
就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
-------------------- flex布局 父项 常见属性 ------------------
3.1 常见父项属性
以下由6个属性是对父元素设置的
- flex-direction:设置主轴的方向
- justify-content:设置主轴上的子元素排列方式
- flex-wrap:设置子元素是否换行
- align-content:设置侧轴上的子元素的排列方式(多行)
- align-items:设置侧轴上的子元素排列方式(单行)
- flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
3.2 flex-direction 设置主轴的方向
1. 主轴与侧轴
在 flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有