如何使用 Flexbox 将单个元素右对齐？

使用 Flexbox 右对齐一个项目

为了解决在 Flexbox 布局中右对齐一个元素的问题，提供了 HTML 和 CSS 代码展示一个基本的 Flexbox 设置，该设置将两个项目放置在左侧，一个项目放置在右侧

HTML

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

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

CSS

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}

.result div:last-child {
  float: right;
}

Flexbox 方法

要右对齐一个子元素，请将其设置为 margin-left： 汽车;。这利用了主轴中的自动边距属性，这对于将 Flex 项目分成不同的组非常有用。

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

更新的 Fiddle

更新的 JSFiddle 演示了这一点有效方法：

[已更新Fiddle](https://jsfiddle.net/vhem8scs/)

在更新的 CSS 中，margin-left: auto;属性应用于 .wrap 容器中的最后一个 div 元素，使其右对齐。

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