基础

①确定父子关系
②确定儿子们的布局方向： flex-direction: row行布局 / column列布局
③确定该布局方向上儿子们的对齐方式（相对于父亲容器来说的）
eg. 水平布局row

上下对齐方式：align-items: flex-start / center / flex-end / stretch(前提是儿子不能设置高宽度，儿子们在父亲的大小内尽可能地长或宽，常用于未知宽高的设置）
水平对齐方式：justify-content:flex-start / center / flex-end

注意

①必须有父子关系，才能使用flex布局
②只针对一个方向上的布局，要么水平，要么垂直，不能同时水平和垂直，默认水平
③父子关系是相对的，可嵌套多个父子关系，flex设置在父亲中

问题：
当中部内容超多的时候，中部内容和下部内容会重叠在一起，且出现滚轮

期待：
中部内容高度确定，在一定范围的视窗内滚动，底部内容和上部内容黏住不动

解决方式：
上部内容和下部内容设置：flex-shrink:0 ; flex-grow: 0
中部内容设置：flex-grow: 1 ; overflow: auto ;

flex-grow: 1 表示如果有多余空间则全部分给我；0 表示如果有多余空间则别分给我