2、Flex伸缩布局

传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能再移动端很好的布局

flex弹性布局

• 操作方便，布局极为简单，移动端应用很广泛
• PC端浏览器支持情况较差
• IE11或更低版本，不支持或仅部分支持

---

flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
• 伸缩布局=弹性布局=伸缩盒布局=性盒布局=flex布局

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称“项目”。

---

总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

关键属性（父元素）：

  display: flex;	/*设定为Flex布局*/

  flex-direction	/*设置主轴的方向*/
  justify-content	/*设置主轴上的子元素排列方式*/
  flex-wrap			/*设置子元素是否换行*/
  align-content		/*设置侧轴上的子元素的排列方式（多行）*/
  align-items		/*设置侧轴上的子元素排列方式（单行）*/
  flex-flow			/*复合属性，相当于同时设置了flex-direction和flex-wrap*/

主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴。
默认主轴方向就是x轴方向，水平向右·默认侧轴方向就是y轴方向，水平向下。

主轴的方向

	flex-direction:column;	/*主轴设置为Y轴，竖向显示*/

	row				默认值。灵活的项目将