当flex遇到margin

有一个很常见的问题，margin:0 auto常用来作水平居中，为何不用margin: auto来作水平垂直居中，或者说margin: auto 0为什么不能实现垂直居中

知识点

If both margin-left and margin-right are auto, their used values are equal, causing horizontal centring.
// 如果margin-left和margin-right都是auto,那么它们的值就相等，引发水平居中
If margin-top, or margin-bottom are auto, their used value is 0.
// 如果margin-top和margin-bottom都是auto,那么它们的值就等于0

答案揭晓，下面flex闪亮登场

flex + margin

margin:auto生效了，原因何在？

又一个知识点

如果diplay为inline-flex,flex，那么这个区域就有名字了，叫FFC(flex formatting context),在这个区域下的元素的margin就跟平常不一样了
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
// 在FFC区域内，在设置align-self和justify-content之前，该区域内的所有空间都会分配给子元素的margin

啥意思呢

1. FFC区域内的空间会自动分配给子元素的margin，当元素未设置margin时，它的marin-left,margin-right默认为零，但是它的margin-right和margin-bottom的值等于剩余空间，当元素的margin为auto时，表示上下左右的间距都是相等的，所以就会水平垂直居中
2. margin的等级要比justify-content和align-self要高

margin实现flex的属性

space-around

    
liA
    
liB
    
liC
    
liD
    
liE

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

li { 
    margin: auto;
}

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

align-self: flex-start | flex-end | center

.g-nav {
    display: flex;
}

// flex-start
.g-login {
    margin-bottom: auto;
}
// flex-end
.g-login {
    margin-top: auto;
}
// flex-start
.g-login {
    margin: auto 0~~~~;
}

其实grid遇到margin也是同样的结果，只不过grid没有flex那么流行