课程名称：前端工程师2022版
课程章节： flex弹性布局基础知识
主讲老师：alex
课程内容：
今天学习的内容包括：
flex弹性布局基础知识
课程收获：
flex布局(只兼容高版本浏览器，常用于手机端的布局)
1.是什么：弹性布局 display:flex/inline-flex
2.flex容器：采用flex布局的元素
3.flex项目：flex容器的所有子元素
4.主轴：默认水平方向；交叉轴：默认垂直方向
5.常用容器属性
flex-direction: column/column-reserve/row/row-reserve;主轴方向
flex-wrap:nowrap/wrap/wrap-reserve;换行
flex-flow: row nowrap;上面两个简写
justify-content:flex-start/center/flex-end;水平居中 space-between右边间隔相同 space-around左右间隔相同
align-items:flex-start/center/flex-end;垂直居中 stretch无高度填充满 baseline基线对齐
align-content:flex-start/center/flex-end;整体多行垂直居中 stretch无高度填充满 baseline基线对齐; 多根主轴线生效（换行后）
6.常用项目属性
order:-1;先后顺序
flex-grow:1;放大
flex-shrink:;缩小
flex-basis:主轴方向大小;
flex:0 1 auto;
align-self:flex-start/center/flex-end/stretch无高度填充满/baseline基线对齐; 调整单个元素垂直居中
先对body进行display：felx，让header、main、footer使用flex-directionc:column排列。main部分需要沾满整个空余空间，所以给main设置属性flex-grow:1 ，这样main就会沾满整个空间。再对main部分处理。给main部分添加display:flex，让其中的三个项目弹性盒布局。其中，导航部分设置属性order为-1，这样它就会最开头显示。在给主体部分设置属性，flex-grow：1，这样就会填满整个main部分。再对项目中的文字进行处理。文字就是项目的项目，因此添加通用css--flex-center，对其使用display:flex,justify-content:center,align-itmes:center,就是让文字水平垂直居中。
随时随地看视频
