将 Flexbox 元素左右对齐：实用指南-html教程-PHP中文网

将 Flexbox 元素左右对齐：实用指南

心靈之曲

发布： 2025-10-18 10:40:46

原创

529人浏览过

将 Flexbox 元素左右对齐：实用指南

本文旨在解决如何使用 flexbox 将两个元素分别放置在容器的左右两端。通过修改 `justify-content` 属性，我们可以轻松实现元素间的间距调整，从而达到左对齐和右对齐的效果。本文将提供详细的代码示例和解释，帮助你快速掌握这种常用的 flexbox 布局技巧。

Flexbox 是一种强大的 CSS 布局模块，它允许我们轻松地控制元素在容器中的排列方式。在很多情况下，我们需要将一些元素放置在容器的左侧，而将另一些元素放置在容器的右侧。本文将介绍如何使用 Flexbox 实现这种布局。

实现方法

实现元素左右对齐的关键在于使用 justify-content: space-between 属性。该属性会将元素均匀地分布在容器中，第一个元素位于最左端，最后一个元素位于最右端，剩余空间平均分配在元素之间。

代码示例

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

<div class="flex-container">
  <div class="flex-item-left">
    <img src="images1.png" alt="Image 1">
  </div>
  <div class="flex-item">
    <img src="images2.png" alt="Image 2">
  </div>
</div>

登录后复制

为了实现左右对齐，我们需要修改 Flex 容器的 CSS 样式：

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

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

登录后复制

代码解释

display: flex;：将容器设置为 Flexbox 容器。
align-items: center;：可选属性，用于将元素在垂直方向上居中对齐。如果不需要垂直居中，可以省略该属性。
justify-content: space-between;：关键属性，用于将元素左右对齐。它会将第一个元素推到最左边，将最后一个元素推到最右边，并将剩余空间平均分配在元素之间。

完整示例

<!DOCTYPE html>
<html>
<head>
<title>Flexbox 左右对齐示例</title>
<style>
.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 500px; /* 容器宽度，可以根据实际情况调整 */
  height: 100px; /* 容器高度，可以根据实际情况调整 */
  border: 1px solid black; /* 方便观察容器边界 */
}

.flex-item-left img, .flex-item img {
  max-width: 100px; /* 图片最大宽度，可以根据实际情况调整 */
  max-height: 80px; /* 图片最大高度，可以根据实际情况调整 */
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item-left">
    <img src="images1.png" alt="Image 1">
  </div>
  <div class="flex-item">
    <img src="images2.png" alt="Image 2">
  </div>
</div>

</body>
</html>

登录后复制

注意事项