使用 Flexbox 实现元素左右对齐布局_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

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

使用 Flexbox 实现元素左右对齐布局

2025-10-18

浏览次数：次

返回列表

使用 flexbox 实现元素左右对齐布局

本文将介绍如何使用 CSS Flexbox 布局，实现将两个元素分别放置在容器的左右两端。通过设置 `justify-content` 属性为 `space-between`，可以轻松实现这一常见的布局需求，无需额外的类或复杂的定位技巧。

Flexbox 是一种强大的 CSS 布局模式，它提供了一种简单而有效的方式来控制元素在容器中的排列和对齐。在许多情况下，我们需要将元素放置在容器的两端，例如，将导航栏中的 logo 放在左侧，而将搜索框或用户头像放在右侧。Flexbox 的 justify-content 属性可以轻松实现这一目标。

实现方法

实现左右对齐布局的关键在于设置 Flex 容器的 justify-content 属性为 space-between。该属性会将项目均匀分布在容器中，第一个项目位于起始行，最后一个项目位于终止行。这意味着第一个元素会被推到左侧，而第二个元素会被推到右侧，从而实现左右对齐的效果。

示例代码

以下是一个简单的 HTML 结构，包含一个 Flex 容器和两个子元素：

移动端UI&微信UI YDUI Touch

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

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

<div class="flex-container">
  <div class="flex-item-left">
    @@##@@
  </div>
  <div class="flex-item">
    @@##@@
  </div>
</div>

为了实现左右对齐，我们需要添加以下 CSS 样式：

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中，可选 */
  justify-content: space-between; /* 关键属性：左右对齐 */
}

代码解释

display: flex;：将容器设置为 Flex 容器。
align-items: center;：可选属性，用于将项目在垂直方向上居中对齐。
justify-content: space-between;：关键属性，将项目均匀分布在容器中，并将第一个项目放置在起始行，最后一个项目放置在终止行，从而实现左右对齐。

注意事项