将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;
    }
}

这是一个小提琴，有一个例子：https://jsfiddle.net/fb4bo9d6/