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

2025-10-16 技术问答

本文旨在帮助初学者理解和掌握如何使用 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 代码：

标书对比王

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

查看详情



    
    
    
    Landing Page
    
        .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;
        }
    


    
        
            
                Call to action! It's time!
                Sign up for our product by clicking that button right over there!

代码解释：