这是我参与「第五届青训营」笔记创作活动的第2天

课程重点

CSS 代码构成
CSS 使用方法
CSS 流程之选择器组、文本渲染
调试 CSS
CSS布局方式
弹性盒布局flex

CSS是什么？

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

CSS的使用方式

外联，嵌入，内联。

CSS的工作流程

加载HTML -> 解析HTML -> 创建DOM树 -> 展示页面在解析hHTML时会加载HTML -> 解析CSS -> 添加样式到DOM节点

CSS选择器

作用：找出页面中的元素，给他们设置样式

方式：

标签选择器，类选择器，id选择器
按属性
按照DOM树中的位置

组合写法：

布局方式

flex弹性盒布局

布局原理：

任何一个容器都可以指定flex布局，可以为盒状模型提供最大的灵活性

当把父盒子设为flex弹性盒布局后，子元素的float，clear，vertical-align属性将失效

采用flex布局的元素称为flex容器，它的所有子元素自动成为容器成员，称为flex项目，子容器可以横向排列可以纵向排列

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

图片来自：【青训营】- HTMl&CSS 基础 & UI 设...-青训营社区 (juejin.cn)

flex布局父项属性：

所有的属性都写在父盒子里面，写在display-flex的下一行

flex-direction：设置主轴方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，同时设置flex-direction 和 flex-warp

flex-direction 设置主轴的方向

默认的主轴是x轴，y轴默认是侧轴

元素是跟着主轴来排列的

justify-content 设置主轴上的子元素排列方式

一定要确定好主轴是哪一个

默认从左往右排列

flex- start 默认从头部开始，如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 平分剩余空间
space-between 先两边贴平再平分剩余空间 （重要）

flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线上（主轴），flex-warp默认不换行，如果装不开，则会自动减小子元素的宽度

nowarp 不换行
warp 换行

align-items 设置侧轴子元素排列方式（单行）

该属性只能在侧轴是单行时使用

flex-start 从上到下
flex-end 从下到上
center 挤在一起居中 （垂直居中）
stretch 拉伸，沿着侧轴去拉伸，拉到和父盒子一样高（子盒子不要给高度，如果子盒子有高度则不生效）（不常用）

algin-content 设置侧轴子元素排列方式（多行）

该属性只能在侧轴是多行时使用，在单行下使用没有效果

flex-start 从上到下
flex-end 从下到上
center 挤在一起居中 （垂直居中）
space-around 子元素平均分配剩余空间
space-between 子元素两边贴平，再平分剩余空间
stretch 拉伸，沿着侧轴去拉伸，拉到和父盒子一样高（子盒子不要给高度，如果子盒子有高度则不生效）（不常用）

algin-items与algin-content的区别

flex-flow 复合写法

是flex-derection和flex-warp的复合写法

分开写：

flex-direction: row;
flex-warp: warp;

简写：

flex-flow: row warp;

flex布局子项属性：

flex
algin-self
order

flex:

flex属性定义子项目分配剩余空间，用flex来表示占多少份数，用数字表示占几份，

.child{
    flex: 1;    /*占一份*/
}

algin-self:

设置子项在侧轴上的排列方式

总结：

复习了一下CSS，并借助MDN文档对flex布局简单整理

[走进前端技术栈-CSS | 青训营笔记]