【学习打卡】第14天 前端工程师2022版 flex弹性布局第一讲

课程名称：前端工程师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,就是让文字水平垂直居中。