布局原理
其实就是弹性布局
可以把盒子指定成flex
display:flex
1.当父元素为flex时，子元素float,clear,vertical-alian属性失效
2.伸缩布局 = 弹性布局 = 伸缩盒布局 = flex布局
3.flex是给父盒子指定的，子元素自动变成父盒子的容器成员，子容器可以横向也可以纵向
总结
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
父级属性
flex-direction主轴方向
默认是水平向右
| 属性值 | 说明 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| colunm | 从上到下 |
| colunm-reverse | 从下到上 |
justify-content主轴子元素排列方式
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值 从头部开始 如果主轴是X轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 水平居中 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边 再平分剩余空间 |
很好理解，也很简单
要说的就是你的元素设置宽度后，如果空间不够，就会等比例压缩所有元素的宽度
flex-wrap
如果主轴宽度不够放下一个新的元素的时候，会默认缩小主轴所有元素的宽度，按比例放下所有元素，默认值nowrap不换行
两个属性
wrap，和nowrap (默认)
1.如果你的父盒子设置了高度，那么换行之后所有的行会平分你的高度
2.如果你的父盒子没有高度，那么换行之后，每行之间没有空隙
很简单没啥说的
align-items侧轴上的子元素排列方式（单行）
其实多行也是可以用的，效果就是把所有空间平均分配，然后每个单行在自己的空间里侧轴居中
当然用单行肯定效果好点了
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中(垂直居中) |
| stretch | 拉伸(默认值) |
太简单了，，没啥讲的
拉伸是干嘛的，呢，是在你的元素没有给高度的时候拉的和父元素一样高，给了高度就按高度来
align-content侧轴上的子元素排列方式（多行）
就是在出现换行的情况下侧轴的排列方式
单行无效
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
flex-flow
它是flex-direction 和flex-wrap的复合属性
flex-flow:row wrap
很简单没啥讲的
子级属性
flex
设定父级剩余空间如何分配
1243
效果：我们会发现不过如何拉伸，第一个都是其它的2倍宽
css flex.gif
align-self
我们现在给父盒子和子盒子都加上高度，然子盒子不会在高度上完全拉伸，这样就会形成子盒子默认都在父盒子上方(当然可以设定align=items)，现在我们只想让某一个子盒子调整子轴的位置就会用到align-self
1243