在flex布局中，如何让其中一个子元素右对齐？

前言

在移动端的开发中，我们常用flex来布局，flex布局真是布局的万能神器，让我们写样式的能力咔咔提升。

最近遇到了一个这样的布局情况：

在一个flex容器中，有3个按钮子元素，这三个子元素不是同时显示的，默认的水平方向对齐是左对齐，但我们需要让其中一个按钮子元素右对齐。

思路

1. 子元素单独设置对齐方式，立马想到了align-self，但是它是设置垂直方向的对齐方式。目前水平方向好像还没有这样的一个属性。

2. 有看到说设置justify-self，但是不起作用。其实这个属性是作用在父容器上的，并且是定义多根轴线的对齐方式，单根轴线不起作用。

单靠flex布局自身的属性，好像无法实现了，看到一篇文章的一个技术实现，可以完美解决这个布局问题。

实现

常见的做法是将子元素的 margin-left 设置为 auto。

<div class="box">
    <div class="btn">按钮1</div>
    <div class="btn">按钮2</div>
    <div class="btn btn-s">按钮3</div>
</div>

.box {
    display: flex;
}
.btn-s {
    margin-left: auto;
}

这样btn-s可以右对齐，而其他按钮还是左对齐了。

在 Flex 布局中，剩余的可用空间会平均地分配给所有子元素，将一个子元素的margin-left设置为auto，可以使该元素占据剩余的空间。

如下图：

后记

记录在做项目的过程中，每一个小知识点。

时刻记录者，总有人需要~