Vertikal ausrichten mit Flex-Box und Flex-Richtung: Spalte

Question

Derzeit mein HTML wird wie folgt dargestellt:


ich will es wie folgt angezeigt:

Die Tasten werden müssen vertikal ausgerichtet mit dem Text unter Verwendung von flex-box oder einer anderen Methode, die keine Auffüllung erfordert, Rand (Rand: auto ist in Ordnung) oder Offsets.

http://codepen.io/simply-simpy/pen/vKpAYN

HTML:

<ul class="nav"> 
    <li><a href="/about.html">about</a> 
    <button>+</button> 
     <ul> 
     <li><a href="/level-2.html">Level 2 nav item</a> 
      <button>+</button> 
      <ul> 
       <li><a href="/level-3.html">Level 3 nav item</a></li> 
       <li><a href="/level-3.html">Level 3 nav item</a></li> 
       <li><a href="/level-3.html">Level 3 nav item</a></li> 
      </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

CSS

.nav { 
    width: 300px; 
    } 
    button { 
    display: inline-block; 
    width: 25px; 
    height: 25px; 
    align-self: flex-end; 
    } 
    ul { 
    list-style-type: none; 
    } 
    ul > ul li{ 
    padding-left: 20px; 
    } 
    ul > ul > ul li { 
    padding-left: 40px; 
    } 
    li { 
    display: flex; 
    flex-direction: column; 
    line-height: 3; 
    } 
    a { 
    border-top: 1px solid black; 
    } 

Answer 1

Sie können Gruppe button und a in einem div und Verwenden Sie display: flex auf diesem div mit align-items: center, um Elemente vertikal zu zentrieren.

.nav { 
 
    width: 300px; 
 
} 
 
button { 
 
    width: 25px; 
 
    height: 25px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
ul > ul li { 
 
    padding-left: 20px; 
 
} 
 
ul > ul > ul li { 
 
    padding-left: 40px; 
 
} 
 
li { 
 
    width: 100%; 
 
    border-top: 1px solid black; 
 
} 
 
a { 
 
    padding: 20px 0; 
 
    display: block; 
 
} 
 
div { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
}

<ul class="nav"> 
 
    <li> 
 
    <div> 
 
     <a href="/about.html">about</a> 
 
     <button>+</button> 
 
    </div> 
 
    <ul> 
 
     <li> 
 
     <div> 
 
      <a href="/level-2.html">Level 2 nav item</a> 
 
      <button>+</button> 
 
     </div> 
 
     <ul> 
 
      <li><a href="/level-3.html">Level 3 nav item</a> 
 
      </li> 
 
      <li><a href="/level-3.html">Level 3 nav item</a> 
 
      </li> 
 
      <li><a href="/level-3.html">Level 3 nav item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>