深入理解 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>