CSS进阶-第一篇：深入 CSS 布局-Flexbox 布局（一）：核心概念与方向属性

本文链接：https://blog.csdn.net/youyong/article/details/147129889

CSS进阶-第一篇：深入 CSS 布局-Flexbox 布局（一）：核心概念与方向属性

在现代网页设计中，Flexbox（弹性盒子布局模型）已成为构建灵活且响应式布局的重要工具。本文将深入探讨 Flexbox 的核心概念，并详细解析其 flex-direction 属性。

1. Flexbox 核心概念重温

Flex 容器与 Flex 项目的定义

Flex 容器是应用了 display: flex 或 display: inline-flex 属性的 HTML 元素。它就像是一个“大盒子”，内部包含着多个子元素，这些子元素就是 Flex 项目。Flex 容器负责管理 Flex 项目的布局方式，而 Flex 项目则是具体参与布局的元素。

示例展示角色差异

假设我们要创建一个简单的卡片布局，HTML 结构如下：

<div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

在上述代码中，div.flex-container 就是 Flex 容器，而里面的三个 div.flex-item 就是 Flex 项目。通过 CSS 对 Flex 容器进行设置，可以控制 Flex 项目的排列、对齐等布局方式。

创建 Flex 容器和 Flex 项目的 CSS 设置

要将一个元素设置为 Flex 容器，只需在 CSS 中添加以下代码：

.flex-container {
    display: flex;
}

对于 Flex 项目，虽然不需要专门的 CSS 属性来声明它是 Flex 项目（只要是 Flex 容器的直接子元素就是 Flex 项目），但我们可以对其添加一些样式来控制它们在容器中的表现，例如：

.flex-item {
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
}

这样，一个简单的 Flex 布局就初步搭建起来了。

2. Flex 容器属性-`flex-direction` 详解

`flex-direction` 不同取值的含义

flex-direction 属性用于决定 Flex 项目在 Flex 容器中的排列方向。它有四个主要取值：

row：这是默认值。Flex 项目将沿着水平方向从左到右排列，就像文本在一行中排列一样。
row-reverse：与 row 相反，Flex 项目沿着水平方向从右到左排列。
column：Flex 项目沿着垂直方向从上到下排列，类似于垂直书写的文本。
column-reverse：与 column 相反，Flex 项目沿着垂直方向从下到上排列。

每个取值在不同布局场景中的应用

水平导航栏适用 row：在网页的导航栏设计中，通常希望菜单项水平排列。例如，一个简单的导航栏 HTML 结构如下：

<nav class="nav-container">
    <a href="#" class="nav-item">Home</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Services</a>
</nav>

CSS 设置如下：

.nav-container {
    display: flex;
    flex-direction: row;
    background-color: gray;
}

.nav-item {
    color: white;
    text-decoration: none;
    padding: 10px;
}

这样，导航菜单项就会水平排列，形成常见的水平导航栏。

垂直侧边栏适用 column：当我们需要创建一个垂直的侧边栏时，column 取值就非常合适。例如：

<aside class="sidebar-container">
    <div class="sidebar-item">Link 1</div>
    <div class="sidebar-item">Link 2</div>
    <div class="sidebar-item">Link 3</div>
</aside>

CSS 代码：

.sidebar-container {
    display: flex;
    flex-direction: column;
    background-color: lightgray;
    width: 200px;
}

.sidebar-item {
    padding: 10px;
    border-bottom: 1px solid gray;
}

此时，侧边栏的项目会垂直排列，形成垂直侧边栏的效果。

实践演示

以下是一个实时展示 flex-direction 取值变化对元素排列方向产生影响的完整 HTML 和 CSS 代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        #flex-container {
            display: flex;
            width: 300px;
            height: 200px;
            background-color: lightgray;
        }

        .flex-item {
            background-color: skyblue;
            padding: 10px;
            margin: 5px;
        }

        #row {
            flex-direction: row;
        }

        #row-reverse {
            flex-direction: row-reverse;
        }

        #column {
            flex-direction: column;
        }

        #column-reverse {
            flex-direction: column-reverse;
        }
    </style>
</head>

<body>
    <h2>flex-direction: row</h2>
    <div id="flex-container" id="row">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <h2>flex-direction: row-reverse</h2>
    <div id="flex-container" id="row-reverse">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <h2>flex-direction: column</h2>
    <div id="flex-container" id="column">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <h2>flex-direction: column-reverse</h2>
    <div id="flex-container" id="column-reverse">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>

</html>