快速学习掌握移动Web开发布局总结（流式布局+flex伸缩布局+rem布局+Boostrap框架 ）

由于element-ui中好多布局用到了flex，所以来学习一下flex布局和rem布局，之前跳过了，教程来自黑马pink老师。

移动端常见布局

移动端技术选型

移动端布局和以前学习的PC端有所区别

一、流式布局（百分比布局）

• 流式布局，就是百分比布局，也称非固定像素布局
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
• 流式布局方式是移动web开发使用的比较常见的布局方式
  
• max-width 最大宽度（max-height 最大高度）
• min-width 最小宽度（min-height 最小高度）

二、flex伸缩布局

1）传统布局和flex布局

2）布局原理

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

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

采用Flex布局的父盒子称为Flex容器（flex container），简称“容器”；
里面的所有子元素自动成为容器的成员，称为Flex项目（flex item），简称“项目”。
原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3）常见的父项属性（6个）

• flex-direction：设置主轴的方向（重点）
  flex布局中分为主轴和侧轴./ 行和列 / x轴和y轴，默认的主轴方向是
  

• justify-content：设置主轴上的子元素排列方式（重点）

• flex-wrap：设置子元素是否换行(重点)
  默认情况下，项目都排在一条线上，默认不换行。