神奇的flex+margin:auto

flex布局相信是大家现在开发中比较常使用的一种布局了，使用flex布局进行垂直水平居中相信大家都已经很熟悉了。相信下边的代码大家已经屡见不鲜了。

div {
      width: 100px;
      height: 100px;
      background-color: black;
      display: flex;
      align-items: center;
      justify-content: center;
    }

今天就由这个来引出我们的猪脚，margin。margin用的很多，多用于处理外边距等。今天我们要说的是最简单的垂直水平居中，先来上一段代码：

//html代码

  


//style代码
  .outer {
    display: flex;
  }
  .inner {
    width: 100px;
    height: 100px;
    margin: auto;
  }

这样能完成水平垂直居中？你可以试试，这样真的可以。
可是这是为什么呢？？？
相信你之前也使用过或者想过使用margin:auto;对块级元素进行水平垂直居中，但是并没有达到想要的效果。block元素只是在水平方向上居中了，垂直方向上并没有居中。
bfc下margin无法垂直居中的原因

在块级格式化上下文中，margin-left和margin-right都为auto的时候，则表示他们的值相等，值得计算为剩余空间的一半，所以会达到水平居中。
而当margin-top和margin-bottom为auto的时候，则表示他们的值是0，所以无法完成垂直方向的居中。
ffc下margin垂直水平居中的原因

ffc就是flex布局的格式化上下文，在ffc中设置子元素margin:auto;在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去，这里特别说明下，设置了margin:auto后再设置父元素的justify-content或者子元素align-self则不生效，这里存在优先级的问题，margin的优先级更高一些，
margin实现等分等高

margin可以实现space-around或者space-between效果，代码也是特别简单：

//html代码

    
liA
    
liB
    
liC
    
liD
    
liE

 /* style代码 
    原先实现space-around
    .container{
      display: flex;
      justify-content: space-around;
    }
  */
  /* margin实现 */
  .container {
    display: flex;
  }
  li {
    margin: auto;
  }

是不是特别简单，嘻嘻。对于space-between只是将上边的变化下，对于第一个li元素和最后一个li元素特殊处理下即可，增加如下代码即可。

li:first-child {
    margin-left: 0;
}

li:last-child {
    margin-right: 0;
}

水平方向上的等分我们已经了解了，接下来可以试下垂直方向上的等分环绕。还是原先的html，我们实现下垂直方向flex-end效果

li {
    width: 100px;
    text-align: center;
    color: #fff;
    margin: auto；
    margin-bottom: 0; 
    margin-top: auto; 
}

margin实现两端对齐

导航我们经常用到两端对齐，功能菜单左侧对齐，当前用户、退出登陆右侧对齐。接下来我们就用神奇的margin实现下。现在我们把liD和liE居右。

//html代码

    
liA
    
liB
    
liC
    
liD
    
liE

.container{
  display:flex;
}
li:nth-of-type(4){
   margin-left:auto;
}

这样就很简单的实现了。
总结

bfc中margin-top 和 margin-bottom 的值如果是 auto，则他们的值都为 0。
ffc中margin-top 和 margin-bottom 的值如果是 auto，则他们平均分配垂直方向上的剩余空间。
单个方向上使用自动 margin ，它的计算值为该方向上的剩余空间。
使用了自动 margin 的 flex 子项目，它们父元素设置的 justify-content 以及它们本身的 align-self 将不再生效。
这里还需要分清那些flex父容器的属性，那些是子元素的属性，常用属性在这里提一下
父容器：display:flex， justify-content、align-self、flex-wrap(换行)、flex-direction，flex-flow(flex-firection+flex-wrap)、align-content。
子元素：flex 、align-self、flex-basis、flex-grow、flex-shink、order