margin在flex布局的妙用

直奔主题，我们来看一个情况：

<div>
    <div></div>
    <div></div>
</div>

上面就是描述问题的最简单的结果，一个div中有两个子div，要求是第一个div居左，第二个div居右，位置不能变化，第一个div有可能隐藏。

那么问题来了，如何使用flex来实现这种布局呢？

分析尝试

大家很容易想到，父容器flex, justify-content：space-between不就好了吗? 如果第一个元素不隐藏，那毋庸置疑，但是如果第一个元素隐藏，那么第二个元素会自动跑到左边，这样行不通的哟。我也是想了好一段时间，都没想到最好的方案。

margin在flex布局中的力量

最终在知乎上找到了同类型的问题，如何解决前端的flex流动布局中的单个子元素位置？。margin在flex布局中，子元素margin为auto的时候，伸缩包含块剩余的空间将会分配到flex-item的外边距margin上，那这个问题的答案就可以对第二个flex-item添加margin-left: auto来完美解决。同时，这个也很完美的解决了当flex容器下有三个子元素时，要求两个元素居左一个元素居右的这种情况。就不用对两个元素这边再加一个flex容器包裹了。简直不要太完美。

结语

在网上看到的绝大多数flex教程都没有提到过关于margin在flex布局中的应用，这也是此文的意义，希望能帮助到大家，同时希望大家更深入或者找到第一手资料学习。不过大家也许和我一样懒，那我们就多百度咯，毕竟第一手资料读起来不是一般的难受。苦笑。

原文出处：http://yangfeng.tech/2018/12/08/margin-flex/