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布局

11. 参考

【前端教程】我是flex布局，6分钟彻底懂我、了解我？