一文搞懂flex中的主动margin

为了引出本文的主题，先看看这个题目，最快水平垂直居中一个元素的办法有哪些？水平垂直居中也算是CSS领域最为常见的一个题目了，不一样场景下的办法也各不雷同，各有好坏。嗯，下面这种应当算是最便利的了 为了引出本文的主题，先看看这个题目，最快水平垂直居中一个元素的办法有哪些？

水平垂直居中也算是 CSS 领域最为常见的一个题目了，不一样场景下的办法也各不雷同，各有好坏。嗯，下面这种应当算是最便利的了：

    

.g-container {
    display: flex;
}
 
.g-box {
    margin: auto;
}

上面的 display: flex 替代成 display: inline-flex | grid | inline-grid 也是可以的。

CodePen Demo -- 运用 margin auto 水平垂直居中元素

怎样让 margin: auto 在垂直标的目的上居中元素

嗯。这里其实就波及了一个题目，怎样让 margin: auto 在垂直标的目的上生效？

换句话说，传统的 display: block BFC（块格局化高低文）下，为何 margin: auto 在水平标的目的可以居中元素在垂直标的目的却不过关？

平常我们会运用这段代码：

div {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

让元素相对父元素水平居中。但是要是我们想让元素相对父元素垂直居中的话，运用 margin: auto 0是不生效的。

BFC 下 margin: 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/GFC 使 margin: auto 在垂直标的目的上居中元素

OK，这里要使单个元素运用 margin: auto 在垂直标的目的上能够居中元素，需要让该元素处于 FFC(flex formatting context)，或者 GFC(grid formatting context) 高低文中，也就是这些取值中：

{
    display: flex;
    display: inline-flex;
    display: grid;
    display: inline-grid;
}

FFC 下 margin: auto 垂直标的目的可以居中元素的缘由

本文暂且不谈 grid 布局，我们业务中需求中更多的可能是运用 flex 布局，下文将着重环绕 flex 高低文中主动 margin 的一些体现。

嗯，也有许多前端被戏称为 flex 工程师，什么布局都 flex 一把梭。

查看 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

关于这样一个 flex 布局：

    
liA
    
liB
    
liC
    
liD
    
liE

要是它的 CSS 代码是：

.g-flex {
    display: flex;
    justify-content: space-around;
}
 
li { ... }

结果如下：

那么下面的 CSS 代码与上面的结果是完全等同的：

.g-flex {
    display: flex;
    // justify-content: space-around;
}
 
li {
    margin: auto;
}

CodePen Demo -- margin auto 实现 flex 下的 space-around

主动 margin 实现 space-between

同理，运用主动 margin，也很容易实现 flex 下的 space-between，下面两份 CSS 代码的结果的同样的：

.g-flex {
    display: flex;
    justify-content: space-between;
}
 
li {...}

.g-flex {
    display: flex;
    // justify-content: space-between;
}
 
li {
    margin: auto;
}
 
li:first-child {
    margin-left: 0;
}
 
li:last-child {
    margin-right: 0;
}

CodePen Demo -- margin auto 实现 flex 下的 space-between

固然，值得注意的是，很重要的一点：

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 能实现水平标的目的的控制，也能实现垂直标的目的的控制，道理是同样的。

用 margin: auto 模拟 flex 下的 align-self: flex-start | flex-end | center，可以看看下面几个 Demo：

●　CodePen Demo -- margin auto 实现 flex 下的 align-self: center

●　CodePen Demo -- margin auto 实现 flex 下的 align-self: flex-end

不一样标的目的上的主动 margin

OK，看完上面的一大段铺垫之后，大约已经初步理解了 FFC 下，主动 margin 的奇异。

不管是多个标的目的的主动 margin，抑或是片面向的主动 margin，都是非常实用的。

再来看几个成心思的例子：

运用 margin-left: auto 实现不法则两端对齐布局

假如我们需要有如下布局：

DOM 构造如下：

    
导航A
    
导航B
    
导航C
    
导航D
    
登陆

对最后一个元素运用 margin-left: auto，可以很容易实现这个布局：

.g-nav {
    display: flex;
}
 
.g-login {
    margin-left: auto;
}

此时， auto 的盘算值就是水平标的目的上容器罗列所有 li 之后的剩余空间。

固然，纷歧定是要使用在首先个或者最后一个元素之上，例如这样的布局，也是完全同样的实现：

    
导航A
    
导航B
    
导航C
    
导航D
    
登陆
    
注册

.g-nav {
    display: flex;
}
 
.g-login {
    margin-left: auto;
}

这里有 5 行案牍，我们需要其中的第三、第四行相关于剩余空间进行垂直居中。

这里要是运用 flex 布局，简略的 align-self 或者 align-items 宛如都无法迅速解决题目。

而运用主动 margin，我们只需要在需要垂直居中的首先个元素上进行 margin-top: auto，最后一个元素上进行 margin-bottom: auto 即可，看看代码示意：

    
这是首先行案牍
    
这是第二行案牍
    
1、剩余多行案牍需要垂直居中剩余空间
    
2、剩余多行案牍需要垂直居中剩余空间
    
这是最后一行案牍

.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也是可以的。

嗯，非常的好用且利便：CodePen Demo -- 主动margin迅速垂直居中任意段降

运用 margin-top: auto 实现粘性 footer 布局

OK，最后再来看这样一个例子。

请求：页面存在一个 footer 页足局部，要是整个页面的内容高度小于视窗的高度，则 footer 牢固在视窗底部，要是整个页面的内容高度大于视窗的高度，则 footer 正常流排布（也就是需要滚动到底部才干看到 footer），算是粘性布局的一种。

看看结果：

嗯，这个需求要是能够运用 flex 的话，运用 justify-content: space-between 可以非常不错的解决，同理运用 margin-top: auto 也非常容易完成：

    
        ...
    
    

.g-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
 
.g-footer {
    margin-top: auto;
    flex-shrink: 0;
    height: 30px;
    background: deeppink;
}

Codepen Demo -- sticky footer by flex margin auto

上面的例子旨在介绍更多主动 margin 的运用场景。固然，这里不运用 flex 布局也是可以实现的，下面再给出一种不借助 flex 布局的实现方式：

CodePen Demo -- sticky footer by margin/paddig

值得注意的点

主动 margin 还是很有用的，可以运用的场景也许多，有一些上面提到的点还需要再强调下：

• 块格局化高低文中margin-top 和 margin-bottom 的值要是是 auto，则他们的值都为 0

• flex 格局化高低文中，在通过 justify-content 和 align-self 进行对齐以前，任何正处于余暇的空间都会分配到该标的目的的主动 margin 中去

• 单个标的目的上的主动 margin 也非常实用，它的盘算值为该标的目的上的剩余空间

• 运用了主动 margin 的 flex 子项目，它们父元素设定的 justify-content 以及它们自身的 align-self 将不再生效

好了，本文到此完毕，但愿对你有帮忙 :)

本文转载自：https://www.cnblogs.com/coco1s/p/10910588.html

原作者：ChokCoco

相干教程举荐：CSS视频教程

以上就是一文搞懂 flex中的主动 margin的细致内容，更多请关注 百分百源码网 其它相干文章！