用automargins来布局flexbox吧！以及学术一点儿的对比研究：automargins与a

常见的margin: 0 auto;可以将block元素水平居中，实际上auto margins可不止这一点用处呢。在flexbox布局中，auto margins不仅能实现左、右对齐和水平居中，还能实现上、下对齐和垂直居中，甚至可以在同一个container中同时实现多种对齐方式，布局功能颇为强大。在很多情况下，auto margins比align与justify系列对齐属性（alignment properties）更加简洁和巧妙，还不容易出错！

在flexbox布局中，auto margins之所以有这么强大的功能，是因为它能够将剩余空间（free space）全部 “吃掉” 。没有了剩余空间，justify-content与align-self属性也无从下手，自然变得无效了。

来看几个例子吧～

Example 1: 实现flex元素的响应式水平垂直居中

        .container {      height: 300px;      background-color: lavender;      display: flex;      flex-wrap: wrap;    }    .item {      background-color: cornflowerblue;      width: 100px;      height: 50px;      margin: auto;      text-align: center;      line-height: 50px;    }       
    
Item 1

      
查看更多关于用automargins来布局flexbox吧！以及学术一点儿的对比研究：automargins与a的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111933