FLEX布局的简介
Flex 布局，弹性盒子布局。 它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来，更简便、完整、响应式地实现各种页面布局。
它的主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。
任何一个容器都可以指定为 Flex 布局。
如何触发flex布局
给父元素添加属性 display:flex; 默认是横向显示 （注意：与浮动没关系，类似浮动）
一些基本概念：
横轴，纵轴
主轴：触发弹性盒子后项目的排列方向（项目默认沿主轴方向）
侧轴：与主轴垂直的
flex布局中的容器属性
一、修改主轴方向
- flex-direction:row:默认横向布局
2.flex-direction:row-reverse:反方向横向布局
- flex-direction:column:主轴变为纵向
- flex-direction:column:主轴变为纵向，反方向排列
二、主轴对齐方式 justify-content
1.justify-content:flex-start;
不改变 默认值
2.justify-content:flex-end;
在主轴结束位置显示
3.justify-content:flex-center;
主轴中间显示
4.justify-content:space-between;
主轴两端对齐
5.justify-content:space-around;
主轴两端环绕
6.justify-content:space-evenly;
主轴的间距均分
总结
三、交叉轴对齐方式 align-items
1.align-items:flex-start;
不改变 默认值
2.align-items:flex-end;
3.align-items:center;
4.align-items:baseline;
与flex-start一致，很少运用
5.align-items:stretch;
为拉伸效果，但是项目前提是没有高度设定或高度是自适应
总结
四、折行属性
没有触发弹性盒子之前，子元素过多有溢出效果，元素有自己的宽度高度
在触发弹性盒子后所有横向显示，失去其宽度，不折行，积压在一起
1.flex-wrap：no-wrap；
默认属性 不改变
2.flex-wrap:wrap；
折行显示，有自己的宽度
留白空间是因为不够放入一个元素
总结
五、折行调整间距 align-content：
1.align-content：flex-start;
在侧轴的起点显示，没有行间距
2.align-content：flex-end;
在侧轴的结束位置显示，没有行间距
3.align-content：center;
在侧轴的中间位置显示，没有行间距
4.align-content：space-between；
在侧轴的两端对齐
5.align-content：space-around；
在侧轴的行间距环绕 行与行之间的距离是贴边行距离容器边的两倍
6.align-content：stretch；
行与行之间的距离是平均的
总结
flex中的项目属性
一、对项目单独调整 align-self:
属性
效果
总结
二、项目调整显示顺序
order取值可正可负 取值越大越靠朝后面
总结
三、剩余空间的所有 flex:1
1.主轴在横向
给二号元素加flex:1;
其余两个项目不变 加了的占满整行
假若都加上
平分了整个容器宽度
2.主轴在纵向
给二号元素加flex:1;
假若都加上
平分了整个容器高度
总结
三、
1、flex-shrink
默认值为0被挤压的效果
取值为1时不挤压不换行
使用overflow：auto；产生滚动条
2.flex-grow
取值能为 1 2 3等等意为几倍几倍
3.flex-basis
默认值为 auto
