使用flex布局让其中一个子元素右对齐实例教程是怎样的？

大家好，我是飞小优，在建站过程或者其他项目过程中经常会遇到flex布局，因为flex布局称得上是使用高频的布局方式，主要是方便快捷。

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

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

思路扩展

1. 子元素单独设置对齐方式，立马想到了align-self，但是它是设置垂直方向的对齐方式。目前水平方向好像还没有这样的一个属性。
2. 有看到说设置justify-self，但是不起作用。其实这个属性是作用在父容器上的，并且是定义多根轴线的对齐方式，单根轴线不起作用。

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

实现方式

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

<div class="flex-box">
     <div class="text-format-el">建站及SEO优化教程文档</div>
     <div class="search">建站及SEO优化教程文档</div>
</div>
.flex-box {
    display: flex;
    justify-content: space-between;
}
.text-format-el {
    text-align: left;
    font-size: 35px;
    line-height: 42px;
    width: 50%;
    margin-top: 10px;
    position: absolute;
}
.search {
    width: 50%;
    display: flex;
    margin-left: auto; /*子元素左边距设置*/
    position: relative;
    margin-bottom: 4%;
}

前端效果

写在最后

关于使用flex布局中，如何让其中一个子元素右对齐的内容就介绍到这儿以上的代码仅供参考供大家学习打开思路，具体根据实际项目需求进行部署，关于更多前端SEO知识请添加下方作者微信进行沟通交流。