如何右对齐 Flexbox 项目？

如何将一项与 Flexbox 右对齐？

在 Flexbox 中，可以设置 margin-left: auto;属性将一项向右对齐。

Flexbox 规范指出：

“主轴中自动边距的一种用途是将 Flex 项目
分成不同的“组”。以下示例展示了如何使用它来
重现常见的 UI 模式 - 单个操作栏，其中一些
在左侧对齐，其他在左侧对齐正确。”

这是更新的代码片段：

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

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

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

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

.result div {
  float: left;
}

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

下面更新的小提琴演示了对齐方式：

[fiddle demo](https://jsfiddle.net /vhem8scs/)

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