flex🤒
flex是flexible box的缩写，也叫弹性盒子布局。🤒
1.为什么要flex布局？🤒
在我们常规布局方式(IFC BFC)已经不能满足我们所需要的方式了，因此flex布局也就应运而生。下面来深入学习一下flex布局的相关知识。🤒
2.flex布局🤒🤒🤒
在flex布局中，有水平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴起点叫main start 终点叫做main end.
交叉轴起点叫做 cross start 终点叫做 cross end.
图一
3.flex-direction😳😳😳😳
flex-direction改变主轴和交叉轴的指向。也是改变项目的指向。🤒🤒🤒
默认值：row 即：主轴从左到右
还有以下属性😳😳
row-reverse 主轴从右指向左
column 主轴从上到下
column-reverse 主轴从下到上
侧轴则与主轴交换位置😳
4.flex的自动宽度
在说明自动宽度之前，我们先来说明一下width的几个属性：
max-content
min-content
max-content是不管父盒子的宽度，一直像→延申。
min-content表示容器为最小元素的宽度就行
😳当使用flex布局时，子元素总宽度不超过容器宽度的时候，默认子元素宽度就是max-content。
😳如果总宽度大于容器宽度的时候，默认子元素宽度就是min-content的宽度。
5.flex指定宽度🧐🧐
在flex布局中，如果子元素需要指定宽度的时候，可以使用flex-basis这个属性。当盒子中还有空余宽度的时候，可以使用flex-grow来分配盒子中的剩余宽度。
6.flex自动缩小🧐🧐
当我们子元素宽度大于容器宽度的时候，容器不会被撑开。而是子元素会缩水，可以通过flex-shrink来指定缩水的大小。默认值为1
7.flex简写🧐🧐🧐🧐
flex:grow shrink basis如果不写的话，默认值就是1。
例子：等分：flex:1 0px
8.对齐方式🧐🧐
主轴-justify-content：
- center
space-around - space-evenly
- space-between
- flex-start
- flex-end
交叉轴-align-items:
- center
- flex-start
- flex-end
- stretch
- baseline
多轴–align-content:
只有设置了flex：warp才会生效
-
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间🧐隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
9.换行🧐
flex-warp:warp
默认nowarp
10.order🧐
优先级显示顺序
与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
9.换行🧐
flex-warp:warp
默认nowarp
10.order🧐
优先级显示顺序
