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

2024-09-18 前端 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时，元素的宽度和高度会包括内容区、内边距和边框的总宽（高），即边框和内边距不再增加元素的总尺寸。换句话说，当你指定了一个元素的宽度和高度时，这个尺寸已经预先考虑了内边距和边框的宽度，因此无论你如何调整内边距和边框，元素所占据的空间大小（宽度和高度）保持不变。