使用 Flexbox 实现左右对齐布局-html教程-PHP中文网

使用 Flexbox 实现左右对齐布局

花韻仙語

发布： 2025-10-18 12:15:01

原创

281人浏览过

使用 flexbox 实现左右对齐布局

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

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

实现步骤

HTML 结构： 创建一个 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>

登录后复制

CSS 样式：

左手医生开放平台
左医科技医疗智能开放平台

26

查看详情
- 设置 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;
}
```
登录后复制

完整示例代码

<!DOCTYPE html>
<html>
<head>
<title>Flexbox 左右对齐示例</title>
<style>
.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 500px; /* 示例，设置容器宽度 */
  border: 1px solid #ccc; /* 示例，方便观察 */
  padding: 10px; /* 示例，增加内边距 */
}

.flex-item img {
  max-width: 100px; /* 示例，限制图片宽度 */
  height: auto;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item-left">
    <img src="https://via.placeholder.com/100" alt="Image 1">
  </div>
  <div class="flex-item">
    <img src="https://via.placeholder.com/100" alt="Image 2">
  </div>
</div>

</body>
</html>

登录后复制

注意事项