Flex_0">1. 如何变成Flex布局
变成Flex容器，只需在容器布局的节点的CSS中，增加display : flex
.mylayout {/* 省略了其他代码 */display: flex;
}
2. flex direction : 方向
- row : 以行排列
- row-reverse ： 以行反向排列
- column ：以列排列
- column-reverse ： 以列反向排列
3. flex warp : 换行方式
- nowrap ： 沾满一行后换行
- wrap ： 沾满一行后不换行
- wrap-reverse ： 沾满一行后反向换行
4. justify-content : 横向轴，子元素排列方式
- flex-start ： 左对齐（在水平方向布局时）或上对齐（在垂直方向布局时）
- flex-end ： 右对齐（在水平方向布局时）或下对齐（在垂直方向布局时）
- center ：在主轴上居中对齐。无论是水平方向还是垂直方向布局，都会使项目围绕容器的中心点进行对齐。
- space-between : flex items之间的间隔相等，且第一个项目与容器的起始端对齐，最后一个项目与容器的末尾端对齐，容器两端不留任何空间。
- space-around ： flex items 会均匀地分布在容器的主轴上，每个项目两侧的间隔相等。
5. align-items : 竖向轴，子元素排列方式
- flex-start : 和justify-content一致
- flex-end : 和justify-content一致
- center : 和justify-content一致
- baseline : 以第一行文字为基准线进行排列
- stretch : 某个元素没有设置高度的时候，会自动充满
6. align-content : 行与行之间的排列分布
- flex-start : 当存在多根轴线时，这些轴线会向交叉轴的起始位置对齐，即所有行会紧贴在容器的顶部（如果交叉轴是垂直方向的话）或左侧（如果交叉轴是水平方向的话）。
- flex-end ： 当存在多根轴线时，这些轴线会向交叉轴的结束位置对齐，即所有行会紧贴在容器的底部（如果交叉轴是垂直方向的话）或右侧（如果交叉轴是水平方向的话）。
- center ： 当存在多根轴线时，这些轴线会在交叉轴方向上居中对齐。
- space-between ： 当存在多根轴线时，这些轴线之间的间隔会平均分配，且第一根轴线与容器的交叉轴起始端对齐，最后一根轴线与容器的交叉轴末尾端对齐。
- space-around ： 当存在多根轴线，这些轴线会在交叉轴方向上平均分布，且每根轴线两侧的间隔相等。
- stretch ： 当存在多根轴线时，这些轴线会沿着交叉轴方向被拉伸，以使得各个flex items能够填满整个容器在交叉轴方向上的空间。
7. 单独控制子项
- order : 子项单独排序
- flex grow : 子项如何分配剩余空出的空间 (一行显示有空余)
- flax shrink : 子项如何收缩空间 (一行显示不下)
8. align-self : 单独设置某个子项的位置
- auto : 默认属性
- flex-start : 起始位置对齐。
- flex-end : 结束位置对齐
- center ：居中对齐
- baseline : 基线对齐
- stretch : 拉伸对齐
9. 额外学习 box-sizing: border-box
box-sizing: border-box; 是一个CSS属性，用于改变元素盒模型的计算方式。在默认的盒模型（称为“内容盒模型”或content-box）中，元素的宽度和高度只包括内容区域的大小，边框（border）和内边距（padding）是在这个尺寸之外额外增加的。这意味着当你给元素添加内边距和边框时，元素的实际宽度或高度会变大，超出了你最初设置的宽度和高度值，可能导致布局问题。
而当你将box-sizing属性设置为border-box时，元素的宽度和高度会包括内容区、内边距和边框的总宽（高），即边框和内边距不再增加元素的总尺寸。换句话说，当你指定了一个元素的宽度和高度时，这个尺寸已经预先考虑了内边距和边框的宽度，因此无论你如何调整内边距和边框，元素所占据的空间大小（宽度和高度）保持不变。
10. vue快速入门系列文
vue3 快速入门 (一) : 环境配置与搭建
vue3 快速入门 (二) : 第一个Vue网页
vue3 快速入门 (三) : vue中的图片路径
Vue3 快速入门 (四) : 使用路由实现页面跳转
vue3 快速入门 (五) : Flex布局
