B站随便看了个视频觉得讲的不错，就搬运过来了。
原视频地址
https://www.bilibili.com/video/BV1y441187zh/
https://www.bilibili.com/video/BV1k441157hd/
整体框架
Flex解决了传统前端开发中的很多痛点，使得页面布局更加方便，就看看他是怎么做到的吧
轴向
主轴：flex-direction四个方向
交叉轴：flex-wrap两个方向
对齐
主轴justify-content属性
伸缩情况
盒子足够大
盒子刚刚好
弹性伸缩
交叉轴
只有一行alight-items
多行align-content
结合使用align-content+alight-items
既让子元素在容器交叉轴居中，又让子元素在所在行的交叉轴居中
弹性
宽度flex-basis
四种情况下容器大小
auto：元素的大小
像素：flex-basis的值
百分比：占父容器的比例
0或0%：初始宽度为0
优先级
宽度受最大最小限制
eg：初始为100，最小为200，最后显示200px
扩展flex-grow
扩展的是父容器剩余的而空白
按比例从0~1划分
flex-grow=0
此时不会扩展
flex-grow=0.5
占用剩余的一半
flex-grow=1
剩下的全部占完
收缩flex-shrink
1:1:1
开始时三个子元素超出父容器
三个子元素都设置成flex-shrink：1
将会1:1:1收缩
中间flex-shrink：0
A2不收缩，A1、A3按宽度占满剩下空间
A1=25
A2=200
A3=75
中间flex-shrink：2
按照1:2:1收缩，也就是说都要收缩不过A2收缩幅度是其他元素的2倍
A1=25
A2=50
A3=225
三个属性可以合并写成flex
案例
主轴交叉轴同时对齐
display：flex使用flex布局
三行三列布局
从上到下
主轴方向默认从左到右，要想实现下图header在上fotter在下的样式，第一步先设置flex-direction为column。就实现了下图的效果
从左到右
将container设置为flex容器，再将左右两边元素宽度设置为100，中间设置为flex：1=flex-grow：1就实现了下图的效果
