3

  1. How can I stretch the last item to the right, and align the filter icon to right end of the page?

    the grey background need to stretch to right

  2. How can I center align the icons vertically in flex?

    align-items:center; causing the height of the li to collapse.

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/

the actual page has text also with the icon

enter image description here

Community
  • 1
  • 1
Felix A J
  • 6,300
  • 2
  • 27
  • 46

1 Answers1

3

Since you have fixed height on ul you can use line-height for vertical align. Also you just have to add flex: 1 to li:last-child to take remaining space.

Instad of line-height you can also use display: flex on each li and then center its content with align-items: center and 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
  • 118,580
  • 15
  • 151
  • 176
  • is there any other way other that `line-height` ? I need to add text to the right of the icon later, which can be one line or two lines. – Felix A J Mar 20 '16 at 17:03
  • Yes there is, you can use `flex` on each `li` like this https://jsfiddle.net/Lg0wyt9u/233/ – Nenad Vracar Mar 20 '16 at 17:04
  • I have added text with the image, and also styled the `:after`.. [https://jsfiddle.net/afelixj/Lg0wyt9u/234/](https://jsfiddle.net/afelixj/Lg0wyt9u/234/) .. Can you please look into it and guide me, if it is possible to align the `:after` below the text.. screenshot added in the question – Felix A J Mar 20 '16 at 17:17