css - flex 菜单，换行后整行的第一个元素

Question

响应式 flex 菜单(代码如下)在较小的视口(viewport)上排列如下:

    |first item| |item| |item| |item| |item| |item| 
                    |last item|

Last item is on whole line in the middle. Is it possible to do this? :

                     |first item| 
    |item| |item| |item| |item| |item| |last item|

Looking for common solution. Menu can has any number of items.

* {
 box-sizing: border-box;
}

html {   
 background:#a0522d;
}
ul {
 border:5px solid #a0522d;
 display:flex;
 flex-wrap:wrap;
 max-width:75em;
 padding:0;
 margin:20px auto;
 justify-content: center;
 align-items: center
}
ul li {
 list-style:none;
 flex-grow:1;
}
ul li a		       {
 line-height:1.5;
 padding:8px 16px;
 display:block;
 text-align:center;
 border-radius:0.313em;
 background:PaleGoldenrod;
 margin:2px;
}
.last, .almostlast {
 max-width:320px;
}
    

 <ul>
     <li class="first"><a href="#">first item</a></li>
     <li><a href="#">second item</a></li>
     <li><a href="#">next item</a></li>
     <li><a href="#">item</a></li>
     <li><a href="#">pretty item</a></li>
     <li class="almostlast"><span><a href="#">item</a></span></li>
     <li class="last"><a href="#">last item</a></li>
</ul>

Answer 1

我不确定使用纯 CSS 是否可行。但是您可以通过使用 flex-flow:row-reverse wrap-reverse; 来实现这一点，然后还可以使您的 li 元素反转。

* {
 box-sizing: border-box;
}

html {   
 background:#a0522d;
}
ul {
 border:5px solid #a0522d;
 display:flex;
 flex-flow:row-reverse wrap-reverse;
 max-width:75em;
 padding:0;
 margin:20px auto;
 justify-content: center;
 align-items: center
}
ul li {
 list-style:none;
 flex-grow:1;
}
ul li a		       {
 line-height:1.5;
 padding:8px 16px;
 display:block;
 text-align:center;
 border-radius:0.313em;
 background:PaleGoldenrod;
 margin:2px;
}
.last, .almostlast {
 max-width:320px;
}
    

 <ul>
     <li class="last"><a href="#">last item</a></li>
     <li class="almostlast"><span><a href="#">item</a></span></li>
     <li><a href="#">pretty item</a></li>
     <li><a href="#">item</a></li>
     <li><a href="#">next item</a></li>
     <li><a href="#">second item</a></li>
     <li class="first"><a href="#">first item</a></li>
</ul>