css弹性盒

弹性盒是一种新的布局方式，特别适合移动端布局

1.display:flex弹性盒影响

display:flex;
1.会让里面的子元素默认横向排列
2.会让行内元素，变成块级元素，可以设置宽高
3.弹性盒居中，只有一个元素的时候，加margin:auto;自动居中
水平垂直居中

2.修改主轴方向

主轴默认水平方向排列
侧轴默认垂直方向排列

flex-direction: ;
row  水平方向为主轴，水平排列
column  垂直方向为主轴，垂直排列
row-reverse  反向水平排列，从右到左
column-reverse  反方向垂直排列，从下到上

3.主轴对齐方式

justify-content:;
flex-start   靠前对齐
flex-end     靠后对齐
center       居中对齐
​
space-between 两端对齐 中间等分  紧贴在左右两边  
space-around  距离环绕，第一个盒子与第二个盒子的距离正好是第一个盒子与大盒子的距离，左右外边距一致

4.侧轴对齐方式

align-items: ;
flex-start   靠前对齐
flex-end     靠后对齐
center       居中对齐
不支持两端对齐，距离环绕

5.折行与行间距

flex-warp:warp;
折行，会自动等间距排列

控制折行后间距
align-content:;
flex-start   靠前紧贴
flex-end     靠后紧贴
center       居中紧贴
space-between   自动帖着两端对齐，中间等间距
space-around    等间距对齐

6.项目对齐方式

align-self:flex-start; 默认
align-self:flex-end;   从后向前对齐
align-self:center;     居中
align-self:baseline;   和默认一样
align-self:stretch;    拉伸   ，在没有设置高度的情况下，会默认拉伸撑开到整个母盒子的高度
没有设置高度，其会自动默认拉伸

7.项目-调整顺序

order:0; 默认值
order:值;  值越大，在主轴方向越靠后显示
值相同按先后顺序正常排列
​
可以设置负值

8.项目-剩余宽高

flex:1;   只给一个项目设置值，则占满剩余空间
​
所有项目都设置值则按比例换算，例：
div1,div2  flex:1
div3    flex:3
则div1占1/5，daiv2占1/5，div3占3/5
​
​
适用主轴方向，横轴为主轴，则占满宽度，纵轴为主轴，则占满宽度

9.项目-横向滚动-主轴挤压

flex-shrink:1;
默认值为1，空间不够会产生挤压，更改值为0，就不允许被挤压，
配合overflow:auto;可以完成横向滚动