flex-将最后一项向右对齐

Felix A J 发表于 Dev

费利克斯·阿杰

如何将最后一个项目向右拉伸，并使过滤器图标与页面的右端对齐？

灰色背景需要向右伸展
如何将图标垂直居中对齐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/

实际页面上的文字也带有图标

内纳德·弗拉卡（Nenad Vracar）

由于您具有固定的高度，因此ul可以line-height用于垂直对齐。你也只需要添加flex: 1到li:last-child取剩余空间。

的Instadline-height你也可以使用display: flex每个li然后用中心的内容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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。