使用 Flexbox 实现子元素对齐：一份详细指南-html教程-PHP中文网

使用 Flexbox 实现子元素对齐：一份详细指南

霞舞

发布： 2025-10-16 12:50:01

原创

283人浏览过

使用 flexbox 实现子元素对齐：一份详细指南

本文旨在帮助初学者理解和掌握如何使用 Flexbox 布局模型，解决子元素在父容器中的对齐问题。通过一个实际案例，我们将逐步演示如何利用 Flexbox 的各项属性，实现灵活且精确的元素定位，最终达到预期的页面布局效果。本文将提供详细的代码示例和解释，助你轻松掌握 Flexbox 的使用技巧。

理解 Flexbox 基础概念

Flexbox (Flexible Box Layout) 是一种强大的 CSS 布局模块，用于在容器中排列、对齐和分配项目之间的空间，即使它们的大小是动态的或未知的。理解 Flexbox 的核心概念至关重要：

Flex 容器 (Flex Container): 应用了 display: flex 或 display: inline-flex 的元素。它是所有 flex 项目的父元素。
Flex 项目 (Flex Items): Flex 容器的直接子元素。
主轴 (Main Axis): Flex 项目沿其排列的轴。由 flex-direction 属性决定。
交叉轴 (Cross Axis): 垂直于主轴的轴。

解决垂直对齐问题

在提供的示例中，目标是将 "Sign up" 按钮垂直对齐到容器的右侧。原代码已经使用了 Flexbox，但需要进行一些调整才能实现所需的布局。

核心问题： 按钮在 .cta-container 中，.cta-container 使用 flex-direction: column，导致主轴是垂直方向，align-self: flex-end 在这种情况下将按钮对齐到容器底端，而不是右侧。

解决方案：

修改 .cta-container 的 flex-direction： 将其改为 row，使主轴变为水平方向。
使用 justify-content: space-between： 这将使 cta-texts 和 signup 按钮分别位于容器的两端。
调整 .cta-texts 的宽度： 确保文本内容不会挤压按钮。

修改后的 CSS 代码：

.fourth-section{
    display: flex;
    margin-top: 70px;
    justify-content: center;
}

.cta-container{
    display: flex;
    flex-direction: row; /* 修改为 row */
    justify-content: space-between; /* 添加 justify-content */
    width: 760px;
    background-color: #3882F6;
    padding: 30px;
    align-items: center; /* 垂直居中 */
}

.cta-texts{
    width: 550px; /* 调整宽度 */
    color: white;
}

#signup{
    color: #ffffff;
    font-weight: bold;
    border: none;
    outline:2px;
    outline-style:solid;
    outline-color: #ffffff;
    border-radius: 5px;
    background-color: #3882F6;
    padding: 5px 40px 5px 40px;
    width: 150px;
    /* align-self:flex-end;  删除此行 */
}

#cta-header {
    font-size: 24px;
    margin-bottom: 10px;
}

#cta-header, .cta-texts p {
    margin: 0;
}

登录后复制

完整的 HTML 代码：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

<!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">
    <title>Landing Page</title>
    <style>
        .fourth-section{
            display: flex;
            margin-top: 70px;
            justify-content: center;
        }

        .cta-container{
            display: flex;
            flex-direction: row; /* 修改为 row */
            justify-content: space-between; /* 添加 justify-content */
            width: 760px;
            background-color: #3882F6;
            padding: 30px;
            align-items: center; /* 垂直居中 */
        }

        .cta-texts{
            width: 550px; /* 调整宽度 */
            color: white;
        }

        #signup{
            color: #ffffff;
            font-weight: bold;
            border: none;
            outline:2px;
            outline-style:solid;
            outline-color: #ffffff;
            border-radius: 5px;
            background-color: #3882F6;
            padding: 5px 40px 5px 40px;
            width: 150px;
            /* align-self:flex-end;  删除此行 */
        }

        #cta-header {
            font-size: 24px;
            margin-bottom: 10px;
        }

        #cta-header, .cta-texts p {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="fourth-section">
        <div class="cta-container">
            <div class="cta-texts">
                <header id="cta-header">Call to action! It's time!</header>
                <p>Sign up for our product by clicking that button right over there!</p>
            </div>
            <button id="signup">Sign up</button>
        </div>
    </div>
</body>
</html>

登录后复制

代码解释：