CSS Flex 布局：实现最后一行左对齐的简单技巧

前端

2023-12-28 22:03:23

利用 CSS Flex 布局轻松实现最后一行左对齐

在当今响应式设计的世界中，Flex 布局已成为创建灵活且可适应的布局的利器。然而，有时你可能需要超出其默认行为的范畴，例如实现最后一行左对齐。本文将深入探讨如何使用 CSS Flex 布局轻松实现这一目标。

认识 Flexbox 属性

在掌握如何实现最后一行左对齐之前，了解两个关键的 Flexbox 属性至关重要：

justify-content： 控制项目在水平方向上的对齐方式。选项包括：

flex-start（默认）：左对齐
flex-end：右对齐
center：居中对齐
space-between：均匀分布，第一个项目贴左，最后一个项目贴右
space-around：均匀分布，项目之间和边缘都有间距

align-items： 控制项目在垂直方向上的对齐方式。选项包括：

flex-start（默认）：顶部对齐
flex-end：底部对齐
center：垂直居中
stretch：拉伸以填充整个高度

分步实现最后一行左对齐

要实现 Flex 布局中最后一行左对齐，请按以下步骤操作：

将父容器设为 Flexbox：

.parent-container {
  display: flex;
  flex-direction: row;
}

将子项目也设为 Flexbox：
```
.child-item {
  display: flex;
}
```

设置父容器的 justify-content 为 space-between：

.parent-container {
  justify-content: space-between;
}

设置子项目的 align-items 为 flex-start：

.child-item {
  align-items: flex-start;
}

按照这些步骤，最后一行项目将左对齐，而其他行将保持其默认对齐方式。

实际应用示例

考虑以下示例：

<div class="parent-container">
  <div class="child-item">Item 1</div>
  <div class="child-item">Item 2</div>
  <div class="child-item">Item 3</div>
  <div class="child-item">Item 4</div>
  <div class="child-item">Item 5</div>
</div>

.parent-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.child-item {
  display: flex;
  align-items: flex-start;
}

结果：