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

新闻中心 NEWS CENTER

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

使用 Flexbox 实现左右对齐布局

2025-10-18

浏览次数：次

返回列表

使用 flexbox 实现左右对齐布局

本文介绍了如何使用 CSS Flexbox 实现将两个元素分别左对齐和右对齐的布局。通过修改 Flex 容器的 `justify-content` 属性为 `space-between`，可以轻松实现元素在主轴上的分散对齐，从而达到左右对齐的效果。同时，本文也避免了不必要的类名和属性，使代码更加简洁高效。

在使用 Flexbox 布局时，经常会遇到需要将元素在水平方向上分别左对齐和右对齐的需求。一种简单有效的方法是利用 justify-content: space-between 属性。

实现步骤

HTML 结构： 创建一个 Flex 容器，并在其中放置两个子元素。

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

CSS 样式：
A+响应式布局后台模板
A+是一个完全响应式，基于Bootstrap3.3.7最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对
0 查看详情
- 设置 Flex 容器的 display 属性为 flex，使其成为 Flexbox 容器。
- 设置 align-items 属性为 center，使元素在交叉轴上居中对齐（可选，根据实际需求调整）。
- 关键步骤： 设置 justify-content 属性为 space-between。 space-between 会将元素均匀分布在主轴上，第一个元素与起始位置对齐，最后一个元素与结束位置对齐，剩余空间平均分配在元素之间。由于只有两个元素，因此它们会分别左对齐和右对齐。
- 无需额外的 .flex-item-left 类或 justify-items 属性。
```
.flex-container {
  display: flex;
  align-items: center; /* 可选，根据需要调整 */
  justify-content: space-between;
}
```

完整示例代码




Flexbox 左右对齐示例




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

注意事项