移动端常用的布局
1.以前没有flex布局，以前在移动端是怎么做的，以前的移动端常用的方式： 流式布局 = 浮动+百分比
但是浮动有缺点：脱标，处理起来会比较麻烦
2.flex布局 - 因为浮动的布局处理的时候比较麻烦，所以推出了flex布局
但是flex布局兼容性非常差 ： ie10才支持
所以一般pc端很少用这个flex
布局有一个原则： 如何简单如何来
开启flex布局
在浏览器里面开启flex布局，只需要给一个父元素设置一个属性 ： display : flex;
里面的子元素就自动的变成了flex布局的子项
.box {
display: flex;
}
flex里面的基础知识
flex布局一旦开启，在这个盒子里面有两个轴 —— 主轴和侧轴
主轴的方向控制
flex布局里面的轴向是可以改变
属性： flex-direction
主轴默认就是x轴，侧轴默认是y轴，如果主轴改变了，另一条就自动的变成侧轴
flex-direction
row - 默认值 - 子元素从左到右排列
row-reverse - 从右到左排列
column - 从上到下
column-reverse - 从下到上排列
这个属性一般不会改变知道有主轴和侧轴的概念就行
控制子元素在主轴上的对齐方式
这个也是一个属性控制的 ： justify-content
值有很多：
center - 居中对齐
space-around - 平分对齐
space-between - 两端对齐
控制子元素换行
又是一个属性： flex-wrap
只需要记住一个属性追： wrap - 控制子元素从侧轴的开端开始换行
控制子元素在侧轴上的排列方式
align-content
这个属性的值和 flex-direction是一样的，只不过方向不同
注意点： 这个属性必须在在侧轴上有多个元素才有效果
控制子元素在侧轴的对齐方式
也是一个属性
align-items
它控制的是单行的子元素的对齐的方式，可以把它认为是以前的文字的对象
顶端
居中
基线
底部
合写的属性
如果需要把主轴方向和换行合写
flex-flow : 主轴方向 是否换行
/* flex-flow: 主轴的方向 是否换行 */
flex-flow: column wrap;
子元素里面控制某个子元素的侧轴的对齐
又是一个属性 ： align-self
跟 align-items 很像，但是align-self控制的是子元素自身，对齐方式也是和上面的align-item的值是一样的
控制子元素的排序
就是一个order属性，后面是一个数字，数字越大的子元素，就出现在主轴的末端
order: 1
所有的子元素的order默认是0
控制子元素的缩放
其实也是一个属性： flex,后面跟着你总共占据所有份数的多少份
flex : 1;
\
