css - 将 flex 容器中的最后一个元素居中，而不是第一个

Question

如何使最后一个元素而不是第一个元素居中。

代码:

.impress-profiles {
    .flex() //less mixin for flexbox
    flex-flow: row wrap;
    justify-content: center;

    li {
        flex-shrink: 0;
    }
}

html 是一个简单的列表:

<ul class="impress-profiles">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

这是它的样子:

Answer 1

您可以给列表中的最后一个元素 margin: 0 auto;

.impress-profiles {
    .flex() //less mixin for flexbox
    flex-flow: row wrap;
    justify-content: center;

    li {
        flex-shrink: 0;
    }

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

这是一个带有示例的 fiddle :https://jsfiddle.net/fb4bo9d6/