vue3 快速入门 (五) : Flex布局

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分钟彻底懂我、了解我？