深入理解 CSS Flex 布局：代码实例解析
一、引言
在现代网页设计中，CSS 的 Flex 布局（弹性盒模型）是一种非常强大且常用的布局方式，它能够轻松地实现各种复杂的页面布局，并且对不同设备和屏幕尺寸具有良好的兼容性。本文将通过一段具体的 HTML 和 CSS 代码，深入剖析 Flex 布局的各个属性和用法，帮助你更好地掌握这一重要的前端技术。
二、代码整体结构概述
这段代码由 HTML 和 CSS 两部分组成。HTML 部分主要用于构建页面的基本结构，包含多个<div>元素来展示不同的 Flex 布局效果；CSS 部分则对这些元素进行样式设置，定义了 Flex 布局的各种属性，以实现不同的排列和对齐方式。
三、CSS 样式详细解析
- 通用样式设置：
p标签的样式设置了margin-block-start: 0em;，去除了段落的顶部默认外边距，同时padding-top: 1em;给段落添加了顶部内边距，使段落内容与上方元素有一定间隔。div[class^='box']选择器匹配所有类名以box开头的<div>元素，设置它们的宽度为100px，高度为100px，字体大小为25px，文字颜色为白色（#fff），并且使文字在元素中水平和垂直居中显示（通过text-align: center;和line-height: 100px;实现）。
- 具体盒子样式：
.box1、.box2和.box3分别设置了不同的背景颜色（#f06、#06f和#0f6），用于区分不同的盒子元素。
- Flex 容器样式：
- 定义了多个类名如
.default、.row-reverse、.column、.column-reverse和.default2，它们都设置了display: flex;，将对应的<div>元素转换为 Flex 容器。同时，给这些容器添加了1px的金色（gold）边框，以便在页面上清晰地显示容器的边界。 .row-reverse类设置flex-direction: row-reverse;，使 Flex 容器内的子元素按从右到左的顺序排列，与默认的从左到右（row）排列方式相反。.column类设置flex-direction: column;，使子元素垂直排列，从上到下。.column-reverse类设置flex-direction: column-reverse;，使子元素垂直排列，但顺序是从下到上。
- 定义了多个类名如
- Flex 属性（
flex）的应用：- 当其他元素都定义好长度时，
flex属性用于分割剩余空间的比例。例如，在.default.flex-split1中，定义.box1的flex: 1;，表示box1将占据剩余空间的一份；在.default.flex-split2中，.box1和.box2都设置为flex: 1;，它们将平均分割剩余空间；在.default.flex-split3中，.box1的flex: 1;，.box2的flex: 2;，则box2将占据剩余空间的两份，box1占据一份。
- 当其他元素都定义好长度时，
- 水平对齐方式（
justify-content）：.default.space-between类设置justify-content: space-between;，使 Flex 容器内的子元素左右对齐，两端对齐，中间的间隔相等。.default.space-around类设置justify-content: space-around;，子元素两侧的间隔相等，即元素之间的间隔是元素与容器边缘间隔的两倍。.default.center类设置justify-content: center;，子元素在容器内水平居中排列。.default.flex-end类设置justify-content: flex-end;，子元素集中在容器的末端（右侧）排列。- 虽然代码中没有
.default.flex-start类的相关设置，但它通常表示子元素集中在容器的前端（左侧）排列。
- 垂直对齐方式（
align-items）：.default2类设置了高度为200px，用于展示垂直方向上的对齐效果。.default2.center类设置align-items: center;，使 Flex 容器内的子元素在垂直方向上居中对齐。.default2.flex-start类设置align-items: flex-start;，子元素集中在容器的顶端排列。.default2.flex-end类设置align-items: flex-end;，子元素集中在容器的底端排列。
四、HTML 结构与布局展示
在 HTML 部分，通过<p>标签添加了文本说明，解释每个 Flex 布局效果的含义。然后，使用不同类名的<div>元素来应用相应的 Flex 布局样式，展示了各种不同的排列和对齐效果，如水平方向的不同排列顺序、空间分割以及水平和垂直方向的对齐方式等。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./assets/global.css"><style>p {margin-block-start: 0em;padding-top: 1em;}div[class^='box'] {width: 100px;height: 100px;font-size: 25px;color: #fff;text-align: center;line-height: 100px;}.box1 {background-color: #f06;}.box2 {background-color: #06f;}.box3 {background-color: #0f6;}.default,.row-reverse,.column,.column-reverse,.default2 {display: flex;border: 1px solid gold;}.row-reverse {flex-direction: row-reverse;}.column {flex-direction: column;}.column-reverse {flex-direction: column-reverse;}.default.flex-split1 .box1,.default.flex-split2 .box1,.default.flex-split2 .box2,.default.flex-split3 .box1 {flex: 1;}.default.flex-split3 .box2 {flex: 2;}.default.space-between {justify-content: space-between;}.default.space-around {justify-content: space-around;}.default.center {justify-content: center;}.default.flex-end {justify-content: flex-end;}.default2 {height: 200px;}.default2.flex-start {align-items: flex-start;}.default2.flex-end {align-items: flex-end;}.default2.center {align-items: center;}</style>
</head><body><p>row(默认)</p><div class="default"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>row-reverse</p><div class="row-reverse"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>column</p><div class="column"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>column-reverse</p><div class="column-reverse"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>flex<br />当其他元素都定义好长度时flex用于分割剩余空间的比例<br />定义box1样式flex:1</p><div class="default flex-split1"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>flex<br />当其他元素都定义好长度时flex用于分割剩余空间的比例<br />定义box1,box2样式flex:1 </p><div class="default flex-split2"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>flex<br />当其他元素都定义好长度时flex用于分割剩余空间的比例<br />定义box1样式flex:1,定义box2样式flex:2 </p><div class="default flex-split3"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>justify-content:space-between<br />左右对齐</p><div class="default space-between"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>justify-content: space-around<br />两侧的间隔相等</p><div class="default space-around"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>justify-content: center<br />居中</p><div class="default center"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>justify-content: flex-end<br />集中在末端</p><div class="default flex-end"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>justify-content: flex-start<br />集中在前端</p><div class="default flex-start"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>align-items: center<br />垂直居中</p><div class="default2 center"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>align-items: flex-start<br />集中在顶端</p><div class="default2 flex-start"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><p>align-items: flex-end<br />集中在底端</p><div class="default2 flex-end"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div></body></html>