移动布局基础之 flex布局

1.1 传统布局与flex布局
传统布局：
兼容性好 布局繁琐 局限性
flex布局：
操作方便 布局简单 PC端兼容较差 IE 11及以下版本不支持
2.1 flex布局原理
弹性布局，用来为盒状模型提供最大的灵活性
当我们为父盒子设为flex布局后，子元素的float，clear和vertical-align属性失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，称为flex容器，他的所有子元素称为flex项目
总结：通过给父盒子添加flex属性，来控制盒子的位置和排列方式
3.1 常见父项属性
默认的主轴方向是X轴方向，水平向右
默认的侧轴方向是Y轴方向，水平向下
flex-direction: 设置主轴方向
row: 从左到右
row-reverse: 从右到左
column: 从上到下
column-reverse: 从下到上
justify-content: 设置主轴上的子元素排列方式
flex-start: 默认值，从头部开始排列
flex-end: 从尾部开始排列
center: 在主轴居中对齐
space-around: 平分剩余空间
space-between: 先两边贴边，再平分剩余空间
注意：使用这个属性之前，确定好主轴是哪个
flex-warp: 设置子元素是否换行
flex布局默认不换行
warp自动换行
align-content: 设置侧轴上的子元素排列方式（多行）
flex-start: 默认值在侧轴头部开始排列
flex-end: 从侧轴尾部开始排列
center: 在侧轴中间显示
space-around:子项在侧轴平分剩余空间
space-between: 子项在侧轴先两边贴边，再平分剩余空间
sretch: 设置子元素高度平分父元素高度
在子项为多项时使用
align-items: 设置侧轴上子元素排列方式（单行）
flex-start: 默认值 从上到下
flex-end: 从下到上
center: 垂直居中
sretch: 拉伸
在子项为单项时使用
flex-flow: 复合属性 相当于同时设置了flex-direction和flex-wrap
flex-flow:row warp
4.1 常见的子项属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
4.2 align-self 控制子项自己在侧轴上的排列方式
align-self: flex-end;
4.3 order属性自定义项目的排列顺序