[CSS seven minutes Series] were in 1902, do not know with margin: auto to flex within the container element grouping?

Recently seen several blog posts explaining margin: auto use in flex container, unfortunately most are floating on page explain the performance, we did not get to the bottom of the mechanism which, in this paper do a simple shallow discuss its performance mechanism.

Primer

Daily business iterative process, flex is already a front-end engineers to solve common layout magic weapon. But with the deepening used occasionally find a simple layout to flex enough direct and immediate, but for some slightly complicated layouts, you need layers . package grouping to solve for chestnuts, below is our common layout diagram:

If the container with only three among the flex elements, separated from each other, by means of our justify-content is sufficient to deal with. However, if two elements which need to be processed as a group, such as the BC in FIG one, using flex layout, can not layout structure simple enough to ensure that, it is necessary to use a div AB or the like as a label comprising up element, and BC new package needs to be centered in the container, can be implemented on a layout code is as follows:

<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;
}

Is there a simpler layout than above it? Yes, that is the use of margin: auto.

Use margin: auto to group elements

If you use margin:. Auto, then how to achieve a simpler layout diagram below is the layout code.

<div class="flex-container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">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;
}

Opposite primers code, the red Plotted is the local changes. The main changes are the following three:

Removing properties justify-content in the outer layer flex. [Margin: Auto priority higher than justify-content, this property will fail, is deleted]
Html simplified structure of the original three-layer structure required, only the simplified two.
margin-right margin-left set of B and C is auto.

Discussion on the Mechanism

The best explanation of the principles in the specification css in. We first review the specification for flex container margin: auto explanation [source resource can see Resources at the end of the text].

Specification clearly illustrates two important points:

margin: auto priority than justify-content, align-self high priority
If, after the normal allocation of space, there is still unallocated space, the remaining space will be allocated to margin: auto elements.

However, this specification does not say, if there is more margin: auto elements, how to allocate this space, mdn document has explained [source resource can see Resources at the end of the text]?:

mdn clearly informed, space will be divided equally margin: auto elements. Overall, we can use that margin: auto left and right sides of the space allocated to the sub-elements in the direction of the main shaft flex container.

More examples

1. Set auto Margin, the more the number of allocated

到此有看官可能有疑问了,如果flex容器,一个子元素margin-left,margin-right都设置为auto,另外一个子元素仅仅只设置了margin-left,那么空间该如何分配.实测证明,在主轴方向上,有几个外边距(指margin-left,margin-right)设置为auto,那么就分几份.

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

上述代码显示效果如下:

B因为左右两个外边距都是auto,所以会各占一份,C因为只有左边距是auto,因此只占用一份.

2. flex列容器

上面的举例主轴都是水平方向.那么主轴是竖直方向的是否也适用呢?这里可以肯定回答: 列容器margin:auto仍然有效.不过需要把margin-left,margin-right改成设置 margin-top,margin-bottom为auto.

.flex-container {
  display: flex;
  flex-direction: column;
  height: 500px;
}
.A {
  background: #FFE6CC;
  width: 100px;
}
.B {
  background: #FFF2CC;
  width: 100px;
  margin-top: auto;
}
.C {
  background: #F8CECC;
  width: 100px;
  margin-bottom: auto;
}
.D {
  background: #E1D5E7;
  width: 100px;
}

上述代码显示效果如下:

从示例中可以看出,margin:auto有空间占有效应. 使用margin:auto在某些情况下可以替代 flex:1, justify-content: space-between等的使用.这里不再展开阐释.

总结

margin:auto适合用来给flex容器的子元素间(在主轴方向)增加空间,适当的使用margin:auto可以简化dom的布局结构以及样式代码,提高编程效率.

参考资料

[1] w3c css-flexbox规范: https://www.w3.org/TR/css-flexbox-1/#auto-margins

[2] mdn关于margin:auto对flex容器的影响说明: https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-left

微信搜索 ''十八将君'',关注我的公众号和我一起成长~