垂直对齐 flex-box 和 flex-direction: column答案

【问题标题】：Vertical align with flex-box and flex-direction: column垂直对齐 flex-box 和 flex-direction: column
【发布时间】：2016-11-19 01:13:45
【问题描述】：

目前我的 HTML 显示如下：

我希望它显示如下：

按钮需要使用 flex-box 或其他不需要填充、边距（margin:auto 很好）或偏移的方法与文本垂直对齐。

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;
  }

【问题讨论】：

标签： html css flexbox vertical-alignment

【解决方案1】：

您可以将 button 和 a 组合到一个 div 中，并在该 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>

【讨论】：