移动端开发之flex弹性布局

1. flex 布局优势

1.1 传统布局与flex布局

传统布局：

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

flex弹性布局： 

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

建议： 

1. 若是PC端布局，建议传统布局。
2. 若是移动端布局或者不考虑兼容性的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：设置侧轴上的子元素的排列方式（多行）