使用 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中文网其他相关文章！
