flex - 將最後一項對齊到右側

Question

1. 如何將最後一項拉伸到右側，並將過濾器圖標對齊到頁面的右側？

   灰色的背景需要延伸到右

2. 我怎麼能在中心垂直flex對齊圖標？

   align-items:center;導致li的高度崩潰。

body{ 
 
    background: url(http://i.imgur.com/ilgJJ1Q.gif); 
 
    margin: 0; 
 
} 
 
ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: flex; 
 
    height: 80px; 
 
} 
 
li{ 
 
    padding: 10px; 
 
    text-align: center; 
 
    min-width: 80px; 
 
} 
 
li:last-child{ 
 
    background: rgba(38, 46, 54, .6); 
 
} 
 
.c2{ background: #a15796; } 
 
.c3{ background: #b48c4d; } 
 
.c4{ background: #3a7d7d; }

<ul> 
 
    <li class="c1"><img src="http://i.imgur.com/SRVh4os.png" alt=""></li> 
 
    <li class="c2"><img src="http://i.imgur.com/rBM2CYr.png" alt=""></li> 
 
    <li class="c3"><img src="http://i.imgur.com/9dFFuH5.png" alt=""></li> 
 
    <li class="c4"><img src="http://i.imgur.com/7bQ73kd.png" alt=""></li> 
 
    <li class="c1"><img src="http://i.imgur.com/yJ4vKBG.png" alt=""></li> 
 
</ul>

https://jsfiddle.net/afelixj/79pybrh9/

實際頁面有文字也有圖標

Answer 1

既然你已經固定在高度您可以使用line-height進行垂直對齊。此外，您只需將flex: 1添加到li:last-child即可獲取剩餘空間。

---

Instad的line-height您還可以在每個li使用display: flex，然後用align-items: center和justify-content: centerFiddle

body{ 
 
    background: url(http://i.imgur.com/ilgJJ1Q.gif); 
 
    margin: 0; 
 
} 
 
ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: flex; 
 
    height: 80px; 
 
} 
 
li{ 
 
    padding: 10px; 
 
    text-align: center; 
 
    min-width: 80px; 
 
    line-height: 80px; 
 
} 
 
li:last-child{ 
 
    background: rgba(38, 46, 54, .6); 
 
    flex: 1; 
 
} 
 
.c2{ background: #a15796; } 
 
.c3{ background: #b48c4d; } 
 
.c4{ background: #3a7d7d; }

<ul> 
 
    <li class="c1"><img src="http://i.imgur.com/SRVh4os.png" alt=""></li> 
 
    <li class="c2"><img src="http://i.imgur.com/rBM2CYr.png" alt=""></li> 
 
    <li class="c3"><img src="http://i.imgur.com/9dFFuH5.png" alt=""></li> 
 
    <li class="c4"><img src="http://i.imgur.com/7bQ73kd.png" alt=""></li> 
 
    <li class="c1"><img src="http://i.imgur.com/yJ4vKBG.png" alt=""></li> 
 
</ul>