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