将最后一个项目向右对齐 - 使用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/

实际页面还有带有图标的文本。

- Felix A J

---

所以你想让 c1 填满整个右侧空间？ - Nenad Vracar

需要将最后一个灰色背景向右扩展。 - Felix A J

这可能会对您有所帮助：https://dev59.com/tlwY5IYBdhLWcg3wgX6V#33856609 - Michael Benjamin

Answer 1

由于您已在

上设置了固定高度，因此可以使用line-height进行垂直对齐。此外，您只需要将flex: 1添加到li:last-child即可占据剩余空间。

---

除了line-height之外，还可以在每个li上使用display: flex，然后使用align-items: center和justify-content: center来居中其内容。Fiddle

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>

- Nenad Vracar

---

除了使用 line-height 之外，还有其他的方法吗？我需要稍后将文本添加到图标的右侧，这可能是一行或两行。 - Felix A J

有的，你可以像这样在每个li上使用flex https://jsfiddle.net/Lg0wyt9u/233/ - Nenad Vracar

我已经在图像中添加了文本，并对:after进行了样式设置。https://jsfiddle.net/afelixj/Lg0wyt9u/234/ 你能否请看一下并指导我，是否可以将:after与文本对齐.. 我已在问题中添加了截图。 - Felix A J