标签：

最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨.

引子

日常业务迭代过程中,flex已经是前端工程师解决常见布局的神兵利器.但是随着使用的深入,偶然会发觉flex对于简单的布局足够直接迅速,但是对于稍稍复杂一些的布局,就需要层层的包裹分组来解决.举个栗子,下图是我们常见的布局图:

如果flex容器之中仅仅只有三个元素,彼此分离,我们借助于justify-content就足够应付.但是如果其中两个元素需要当成一组来处理,比如图一中的BC,使用flex布局,就不能保证布局结构足够简单,就需要把AB用一个div之类的标签包括起来当成一个元素,并且BC需要在新的包裹容器中居中,才可以实现上图布局.代码如下:

<div class="flex-container"> <div class="A">A</div> <div class="BC"> <div class="B">B</div> <div class="C">C</div> </div> <div class="D">D</div> </div>

.flex-container { display: flex; justify-content: space-between; } .A { background: #FFE6CC; width: 100px; } .BC { flex: 1; display: flex; justify-content: center; align-items: center; } .B { background: #FFF2CC; width: 100px; } .C { background: #F8CECC; width: 100px; } .D { background: #E1D5E7; width: 100px; }

那么有没有比上面更简单的布局方式么?有,那就是使用margin:auto.

使用margin:auto给元素分组

如果使用margin:auto的话,那么怎么更加简单实现上图的布局.
下面是布局代码.

<div> <div>A</div> <div>B</div> <div>C</div> <div>D</div> </div>

.flex-container { display: flex; justify-content: space-between; } .A { background: #FFE6CC; width: 100px; } .B { background: #FFF2CC; width: 100px; margin-left: auto; } .C { background: #F8CECC; width: 100px; margin-right: auto; } .D { background: #E1D5E7; width: 100px; }

相对与引子中的代码来说,图中标红的是改动的地方.
主要是下面三个改动:

去掉外层flex中的justify-content属性.[margin:auto优先级比justify-content高,会使此属性失效,所以删除]

简化html结构.原来需要三层结构,简化后只需要两层.

B的margin-left和C的margin-right设置为auto.

机理探讨

最好的原理说明在css的规范中.我们首先查阅规范中对于flex容器margin:auto的说明[资源来源可参阅文末的参考资料].

规范中明确说明了两个重要的点,:

margin:auto优先级比 justify-content,align-self优先级高

如果正常分配空间之后,仍然有未分配的空间,剩下的空间将分配给margin:auto的元素.

但是此规范没有说明,如果有多个margin:auto的元素,空间将如何分配?对此,mdn文档有说明[资源来源可参阅文末的参考资料]: