垂直フレックスボックスとフレックス方向に整列：列

Question

現在、私のHTMLは次のように表示されています。ボタンはする必要が

：


私はそれがこのように表示したいですフレックスボックスを使用してテキストと垂直に整列させる方法、または余白（余白：自動でよい）やオフセットを必要としない別の方法です。

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

グループ化できますbuttonと1 divでaとそのdivにdisplay: flexを使用して、align-items: centerと垂直方向に項目を合わせます。

.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>