Flex布局开启，在编写之前，我们要先搞清楚一个问题，就是你要让谁开启flex布局？我们要开启flex布局的最终目的一定是为了让某几个元素进行规范化布局，那如果你单独写在某个元素身上，那它的兄弟元素也不知道自己是用了flex布局，所以display:flex;一定是在父元素身上开启。
一、父元素身上开启flex
//开启flex布局
display:flex;
//布局方向
flex-direction:row;
布局方向
这里的row是指水平方向，column是指垂直方向。后面加reverse的是指反方向，比如row指的是从左到右，那么row-reverse就是从右到左。
二、子元素身上样式 flex-basis，flex-grow，flex-shrink
这三个属性可以分开写，也可以合起来写
flex: flex-grow flex-shrink flex-basis
//默认值是 0 1 auto
这些属性挂载在子元素上，
这里的0和1代表的是比例，每一个子元素item身上都被分配了相关的比例值，flex-grow是指当所有元素按照自身大小渲染完毕之后，父元素主轴方向上仍有空余则按照flex-grow的比例值分配给每一个子项。相反flex-shrink则是当所有元素按照自身大小渲染完毕之后，父元素主轴方向上有溢出，则子元素按照比例缩小。
用flex-grow做例子
.father{
display: flex;
width: 500px;
height: 200px;
background-color: aqua;
}
.child{
flex-grow: 1;
flex-basis: 100px;
background-color: pink;
}
.child:nth-child(1){
flex-grow: 2;
background-color: bisque;
}.child:nth-child(2){
flex-grow: 1;
background-color: yellow;
}
计算方法就是
(100+2x) +(100+x)*2 = 500
4x = 200; => x=50;
第一个子元素就是 200
第二第三个就是 150；
三、flex容器的交叉轴对齐align-items — 一行元素上多标签元素高度不统一怎么对齐。
四、flex容器的主轴对齐方式 justify-content。
五、flex-wrap 当容器空间不足时是否换行
六、align-content 当定义了多根轴线时，项目子啊交叉轴上的对齐方式（多行）。
七、order属性，用于定义flex容器内部子元素的显示顺序。
补充：
在这里我注意到一个width的属性值。
width:max-content | min-content | fit-content
max-content 内容有多宽他就多宽，不会顾及父元素有多宽，即不会撑开父元素。
min-content 装下单个最大内容的最小宽度。
fit-content 在不超过父级盒子宽度的情况下，尽量撑开盒子满足自己的需求。
