弹性容器中的margin

在 FLEX 格式化上下文中，设置了 margin: auto 的元素，在通过 justify-content 和 align-* 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去 。

注意：因为margin是将剩余空间分配给了元素，所以添加了margin后，justify-content 和 align-*属性就不能再被使用了。

1. 使用margin使元素居中

<style>
    .box {
        display: flex;
    }
    .inner {
        margin: auto;  /* 水平/垂直居中 */
        /* margin: auto 0; align-items: center */
        /* margin-top: auto; align-items: flex-end */
    }
</style>

<div class="box">
    <div class="inner"></div>
</div>

2. 使用margin实现 space-* 效果

<style>
    .box{
        display: flex;
        width: 800px;
        margin: 30px auto;
        border: 1px solid red;
    }
    li{
        margin: auto;
        font-size: 18px;
        line-height: 100px;
    }    
</style>

<ul class="box">
    <li>liA</li>
    <li>liB</li>
    <li>liC</li>
    <li>liD</li>
    <li>liE</li>
</ul>

实现类似于 justify-content: space-around 的效果

li{
    margin: 0 auto;
}

实现类似于 justify-content: space-between 的效果

li{
    margin: 0 auto;
}
li:first-child{
    margin-left: 0;
}
li:last-child{
    margin-right: 0;
}

实现类似于 justify-content: space-evenly 的效果

li{
    margin-left: auto;
}
li:last-child{
    margin-right: auto;
}