flex - letzten Artikel nach rechts ausrichten

Question

1. Wie kann ich das letzte Element nach rechts strecken und das Filtersymbol am rechten Ende der Seite ausrichten?

   der graue Hintergrund müssen nach rechts

2. strecken Wie kann ich die Symbole vertikal in flex Zentrieren?

   align-items:center; verursacht die Höhe der li zu kollabieren.

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/

die aktuelle Seite hat Text auch mit dem Symbol

Answer 1

Da Sie Höhe aufbehoben habenkönnen Sie line-height für vertikale Ausrichtung verwenden. Sie müssen auch flex: 1 zu li:last-child hinzufügen, um verbleibenden Platz zu nehmen.

---

Instad von line-height Sie auch display: flex auf jedem li und dann zentriert sein Inhalt mit align-items: center und 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>