居中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

你可以给中最后一个元素名单a 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/