1. flex 布局优势
1.1 传统布局与flex布局
传统布局:
- 兼容性好
- 布局繁琐
- 局限性,不能再移动端很好的布局
flex弹性布局:
- 操作方便,布局简单,移动端应用很广泛
- PC端浏览器支持情况差
- IE11或更低版本,不支持或部分支持
建议:
- 若是PC端布局,建议传统布局。
- 若是移动端布局或者不考虑兼容性的PC端布局,还是使用flex弹性布局。
2. flex 布局原理
flex 是 flexible Box 的缩写,意为 “弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。
- 为父盒子设为
flex
布局后,子元素的float
、clear
、vertical-align
属性将失效。 - 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
采用 Flex 布局的元素,称为 Flex容器(flex container),简称 “容器”。它的所有子元素自动成为容器成员,称为 Flex项目(flex item),简称 “项目”。
- flex项目本身也可以成为容器,称为子容器。则上一级则称为父容器。
- 子容器可以横向排列也可以纵向排列。
- 原理总结:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
3. flex 布局父项常见属性
3.1 常见父项属性
以下由 6 个属性是对父元素设置的。
flex-direction
:设置主轴方向justify-content
:设置主轴上的子元素排列方式flex-wrap
:设置子元素是否换行align-content
:设置侧轴上的子元素的排列方式(多行)- <