Richtig gleichmäßig vertikal Verbreitung

Question

Ich habe nach dem Problem gesucht, fand einige ähnliche Antworten, aber nicht genau das, was ich suche, also hier geht.

Ich habe eine ungeordnete Liste, die gleichmäßig vertikal verteilt werden muss.
Das ist, was ich habe:

<div class="icons"> 
<ul> 
    <li><div class="twitter-icon"><img src="images/twitter.png"></div></li> 
    <li><div class="github-icon"><img src="images/github.png"></div></li> 
    <li><div class="linkedin-icon"><img src="images/linkedin.png"></div></li> 
</ul> 
</div> 

.icons { 
    position:absolute; 
    top:0; 
    right:5%; 
    height:100vh; 
} 
.icons ul { 
    display:table; 
    table-layout: fixed; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.icons li { 
    display: table-row; 
} 

Dies ist das Ergebnis:

Und das ist, was ich suche:

Ich hoffe, das genug Informationen zu erkläre mein Problem.

Answer 1

Statt table können Sie eine flexboxDisplay wie folgt verwenden:

display: flex; /* define a flexbox */ 
flex-direction: column; /* place it vertically*/ 
justify-content: space-around; /* spread it vertically */ 

Demo Siehe unten:

.icons { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 5%; 
 
    height: 100vh; 
 
} 
 

 
.icons ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.icons li { 
 
    display: table-row; 
 
}

<div class="icons"> 
 
    <ul> 
 
    <li> 
 
     <div class="twitter-icon"><img src="http://placehold.it/100x100"></div> 
 
    </li> 
 
    <li> 
 
     <div class="github-icon"><img src="http://placehold.it/100x100"></div> 
 
    </li> 
 
    <li> 
 
     <div class="linkedin-icon"><img src="http://placehold.it/100x100"></div> 
 
    </li> 
 
    </ul> 
 
</div>