都1902年了,还不知道用margin:auto给flex容器内元素分组?

​最近看到几篇博文讲解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;
  ju