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>