我们都知道通过Flex容器+Flex项目的margin:auto;可以轻轻松松实现水平垂直居中：
<div class="g-container">
<div class="g-box"></div>
</div>.g-container {
display: flex;
}
.g-box {
margin: auto;
}上面的display:flex替换成display: inline-flex|grid|inline-grid也是可以的。
真的，我也只是会用，还真没有深入探究margin:auto是如何做到的。直到今天无意间看到《探秘flex上下文中神奇的自动margin》一文，作者解释的很好，所以这里做一下笔记。
理解的重点还是在BFC（块格式化上下文） 、FFC（Flex格式化上下文）、GFC（Grid格式化上下文）。
display: block BFC（块格式化上下文）
传统的display: block BFC（块格式化上下文）下，为什么margin: auto在水平方向可以居中元素在垂直方向却不行？
div {
width: 200px;
height: 200px;
margin: 0 auto;
}查看CSS文档，原因如下，在 BFC 下：
If both margin-left and margin-right are auto, their used values are equal, causing horizontal centring.
—CSS2 Visual formatting model details: 10.3.3
If margin-top, or margin-bottom are auto, their used value is 0.
—CSS2 Visual formatting model details: 10.6.3
简单翻译下，在块格式化上下文中，如果margin-left和margin-right都是auto，则它们的表达值相等，从而导致元素的水平居中。( 这里的计算值为元素剩余可用剩余空间的一半)。
而如果margin-top和margin-bottom都是auto，则他们的值都为0，当然也就无法做到垂直方向上的居中。
FFC(flex formatting context)下margin: auto 垂直方向可以居中元素的原因
查看CSS文档，原因如下，在dispaly: flex下：
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins
简单翻译一下，大意是在flex格式化上下文中，设置了margin: auto的元素，在通过justify-content和align-self进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动margin中去。
这里，很重要的一点是，margin auto的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。
使用自动margin实现flex布局下的space-between|space-around
重点要记住上面最核心的这一句 :在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该维度中的自动margin中去。
这样我们就可以在flex布局下使用自动margin模拟实现flex布局下的space-between以及space-around。
自动 margin 实现 space-around
<ul class="g-flex">
<li>liA</li>
<li>liB</li>
<li>liC</li>
<li>liD</li>
<li>liE</li>
</ul>.g-flex {
display: flex;
//justify-content: space-around;
}
li {
margin: auto;
}
自动 margin 实现 space-between
.g-flex {
display: flex;
// justify-content: space-between;
}
li {
margin: auto;
}
li:first-child {
margin-left: 0;
}
li:last-child {
margin-right: 0;
}当然，值得注意的是，很重要的一点：
Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.
CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins
意思是，如果任意方向上的可用空间分配给了该方向的自动 margin ，则对齐属性（justify-content/align-self）在该维度中不起作用，因为 margin 将在排布后窃取该纬度方向剩余的所有可用空间。
也就是使用了自动 margin 的 flex 子项目，它们父元素设置的 justify-content 已经它们本身的 align-self 将不再生效，也就是这里存在一个优先级的关系。
自动 margin 实现 flex 下的 align-self: flex-start | flex-end | center
使用 margin-left: auto 实现不规则两端对齐布局
<ul class="g-nav">
<li>导航A</li>
<li>导航B</li>
<li>导航C</li>
<li>导航D</li>
<li class="g-login">登陆</li>
</ul>对最后一个元素使用 margin-left: auto，可以很容易实现这个布局：
.g-nav {
display: flex;
}
.g-login {
margin-left: auto;
}此时， auto 的计算值就是水平方向上容器排列所有 li 之后的剩余空间。
当然，不一定是要运用在第一个或者最后一个元素之上，例如这样的布局，也是完全一样的实现：
<ul class="g-nav">
<li>导航A</li>
<li>导航B</li>
<li>导航C</li>
<li>导航D</li>
<li class="g-login">登陆</li>
<li>注册</li>
</ul>.g-nav {
display: flex;
}
.g-login {
margin-left: auto;
}
垂直方向上的多行居中
<div class="g-container">
<p>这是第一行文案</p>
<p>这是第二行文案</p>
<p class="s-thirf">1、剩余多行文案需要垂直居中剩余空间</p>
<p class="s-forth">2、剩余多行文案需要垂直居中剩余空间</p>
<p>这是最后一行文案</p>
</div>.g-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.s-thirf {
margin-top: auto;
}
.s-forth {
margin-bottom: auto;
}当然，这里将任意需要垂直居中剩余空间的元素用一个 div 包裹起来，对该 div 进行 margin: auto 0 也是可以的。
使用 margin-top: auto 实现粘性 footer 布局
要求：页面存在一个 footer 页脚部分，如果整个页面的内容高度小于视窗的高度，则 footer 固定在视窗底部，如果整个页面的内容高度大于视窗的高度，则 footer 正常流排布（也就是需要滚动到底部才能看到 footer），算是粘性布局的一种（说到粘性还有另一种position:sticky粘性定位）。
嗯，这个需求如果能够使用 flex 的话，使用 justify-content: space-between 可以很好的解决，同理使用 margin-top: auto 也非常容易完成：
<div class="g-container">
<div class="g-real-box">
...
</div>
<div class="g-footer"></div>
</div>.g-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.g-footer {
margin-top: auto;
flex-shrink: 0;
height: 30px;
background: deeppink;
}
总结
- 块格式化上下文中margin-top 和 margin-bottom 的值如果是 auto，则他们的值都为 0
- flex 格式化上下文中，在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去
- 单个方向上的自动 margin 也非常有用，它的计算值为该方向上的剩余空间
- 使用了自动 margin 的 flex 子项目，它们父元素设置的 justify-content 以及它们本身的 align-self 将不再生效
