flex布局
布局原理#
其实就是弹性布局
可以把盒子指定成flex
display:flex1.当父元素为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#
设定父级剩余空间如何分配
<div class="box"> <span>1</span><span>2</span><span>4</span><span>3</span></div><style> *{ margin: 0; padding: 0; } div{ display: flex; flex-direction: row; justify-content: space-between; width: 90%; border: black 2px solid; box-sizing: border-box; margin: 0 auto; } div span{ flex: 1; /*设定都占一份*/ background-color: blue; text-align: center; border: 1px black solid; margin: 0 1px; } div span:first-child{ /*第一个span占2份*/ flex: 2; background-color: yellow;
}</style>效果：我们会发现不过如何拉伸，第一个都是其它的2倍宽
align-self#
我们现在给父盒子和子盒子都加上高度，然子盒子不会在高度上完全拉伸，这样就会形成子盒子默认都在父盒子上方(当然可以设定align=items)，现在我们只想让某一个子盒子调整子轴的位置就会用到align-self
<div class="box"> <span>1</span><span>2</span><span>4</span><span>3</span></div><style> *{ margin: 0; padding: 0; } div{ display: flex; flex-direction: row; justify-content: space-between; width: 90%; height: 300px; /*父盒子加上高度*/ border: black 2px solid; box-sizing: border-box; margin: 0 auto; } div span{ flex: 1; background-color: blue; text-align: center; border: 1px black solid; margin: 0 1px; height: 100px; /*子盒子加上高度*/ } div span:first-child{ flex: 2; background-color: yellow; align-self: center; /*调整子盒子在子轴上的位置*/
}这样第一个子盒子就会跑到中间去了
效果：
order#
每一个子盒子都有一个属性order,默认值都是0，这是一个排序属性，越小的在前面现在我们把第一个子盒子order改成1，它应该就会跑到最后一个，因为其它的都是0，
div span:first-child{ flex: 2; background-color: yellow; align-self: center; order: 1; }效果