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布局中的应用,这也是此文的意义,希望能帮助到大家,同时希望大家更深入或者找到第一手资料学习。不过大家也许和我一样懒,那我们就多百度咯,毕竟第一手资料读起来不是一般的难受。苦笑。