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

<ul class="g-flex">
    <li>liA</li>
    <li>liB</li>
    <li>liC</li>
    <li>liD</li>
    <li>liE</li>
</ul>

.g-flex {
    height: 100px;
    margin-bottom: 100px;
    box-sizing: border-box;
    background: #037d65;
    
    display: flex;
    // justify-content: space-between;
}

li {
    width: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: #333;
    
    margin: auto;
}

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

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

View Compiled

This Pen is owned by 千悠 on CodePen. It is a fork of this Pen.

See more by @chiyu-git on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.