使用 Flexbox 实现子元素对齐的终极指南_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 Flexbox 实现子元素对齐的终极指南

2025-10-16

浏览次数：次

返回列表

使用 flexbox 实现子元素对齐的终极指南

本文旨在解决在使用 Flexbox 布局时，如何对齐父容器中的子元素，特别是垂直方向的对齐问题。通过提供清晰的代码示例和详细的步骤，帮助开发者理解 Flexbox 的核心概念，并掌握各种对齐技巧，从而实现灵活且精确的页面布局。

在使用 Flexbox 布局时，经常会遇到子元素对齐的问题。Flexbox 提供了强大的对齐属性，可以轻松控制子元素在主轴和交叉轴上的位置。本文将详细介绍如何使用 Flexbox 实现各种对齐方式，并提供实际的代码示例。

理解 Flexbox 的主轴和交叉轴

在使用 Flexbox 对齐元素之前，首先要理解主轴和交叉轴的概念。

主轴 (Main Axis): 由 flex-direction 属性决定。默认情况下，主轴是水平方向（row）。
交叉轴 (Cross Axis): 垂直于主轴的轴。

常用的 Flexbox 对齐属性

以下是一些常用的 Flexbox 对齐属性：

justify-content: 定义项目在主轴上的对齐方式。
align-items: 定义项目在交叉轴上的对齐方式。应用于 flex 容器。
align-self: 定义项目自身在交叉轴上的对齐方式。应用于 flex 项目。

示例：垂直对齐 "Sign up" 按钮

假设我们有一个包含文本和一个 "Sign up" 按钮的容器，并且希望将按钮垂直对齐到容器的底部。以下是一种使用 Flexbox 实现的方法：

HTML 结构：

<div class='wrapper'>
    <div class='col-1'>
        <b>Call to action! it's time!</b>
        <span>Sign up for our product by clicking that button right over there!</span>
    </div>
    <div class='col-2'>
        <button class='signup-button'>Sign up</button>
    </div>
</div>

CSS 样式：

移动端UI&微信UI YDUI Touch

YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义J*ascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

81 查看详情移动端UI&微信UI YDUI Touch

.wrapper{
    width: 100%;
    height: 70px;
    background-color:#3b82f6;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 15px;
}
.col-1{
    display: flex;
    flex-direction: column;
    color: white;
    justify-content: center;
    margin: 0;
    padding: 0;

}
.col-2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.signup-button{
    background-color:#3b82f6;
    border: 2px solid white;
    border-radius: 5px;
    width: 100px;
    height: 30px;
    color: white;
}

解释：