如何右对齐 Flexbox 容器中的单个项目？

如何使用 Flexbox 将一个项目右对齐

实现精确的项目对齐是网页设计中的常见挑战。 Flexbox 提供了强大的解决方案，但在特定配置中对齐项目可能很棘手。本文探讨了一种常见场景，其中一个项目需要在其他 Flex 项目中对齐。

问题陈述

考虑一个排列了三个子项目的 Flex 容器并排。期望的结果是前两项左对齐，第三项右对齐。以下 HTML 和 CSS 表示初始设置：

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  justify-content: space-between;
}

解决方案：Margin-Left Auto

Flexbox 为这个问题提供了一个简单的解决方案：在最后一个子项目上设置 margin-left: auto 。来自 Flex 规范：

主轴中自动边距的一种用途是将 Flex 项目分成不同的“组”。这可以通过单个操作栏的常见 UI 模式来举例说明，其中一些操作在左侧对齐，其他操作在右侧对齐。

将 margin-left: auto 应用于最后一个我们示例中的子项会产生所需的对齐方式：

.wrap div:last-child {
  margin-left: auto;
}

已更新示例

使用此修改后的 CSS，生成的 HTML 和 CSS 代码片段会产生所需的对齐方式，前两个项目在 Flex 容器内左对齐，第三个项目右对齐：

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}

以上是如何右对齐 Flexbox 容器中的单个项目？的详细内容。更多信息请关注PHP中文网其他相关文章！