Question

我有一个列表，其中一个项目分为两行。

我需要保持所有<li>元素的高度相同，但也要将它们居中对齐，我似乎无法做到（code on CodePen）：

＆＃13;

#test ul{
  display:flex;
  border:1px solid black;
  list-style: none;
  padding-left:0;
}
#test li{
  flex: 1;
  width:33.333333%;
  border-left:1px solid black;
  padding:10px;
}

＆＃13;

<div id="test">
  <ul>
    <li>
      <a href="">Two line Text</a><br/>
      <a href="">Two line Text</a>
    </li>
    <li>
      <a href="">One line Text</a>
    </li>
    <li>
      <a href="">One line Text</a>
    </li>
  </ul>
</div>

＆＃13;

如何在不使用任何hacky填充，边距或高度的情况下完成我所尝试的内容＃34; One line Text＆＃34;元素？如果我在align-items: center上使用建议的ul，则边框看起来不再正确，因为元素不再是全高。

Answer 1

align-items默认为stretch，这使得li填充ul的高度。

将其更改为center，将align-items: center;添加到#test ul规则，将它们垂直居中对齐（这会使li崩溃到其内容中）< / p>

＆＃13;

#test ul {
  display:flex;
  align-items: center;               /*  added  */
  border:1px solid black;
  list-style: none;
  padding-left:0;
}
#test li {
  flex: 1;
  width:33.333333%;
  border-left:1px solid black;
  padding:10px;
}

＆＃13;

<div id="test">
  <ul>
    <li>
      <a href="">Two line Text</a><br/>
      <a href="">Two line Text</a>
    </li>
    <li>
      <a href="">One line Text</a>
    </li>
    <li>
      <a href="">One line Text</a>
    </li>
  </ul>
</div>

＆＃13;

或者使li成为灵活容器，并使用a垂直对齐justify-content: center，其中btw默认为flex-start。

为什么要使用列方向和justify-content，因为有2个项目，您很可能希望将它们叠加在一起。

＆＃13;

#test ul{
  display:flex;
  border:1px solid black;
  list-style: none;
  padding-left:0;
}
#test li{
  flex: 1;
  width:33.333333%;
  border-left:1px solid black;
  padding:10px;

  display:flex;                      /*  added  */
  flex-direction: column;            /*  added  */
  justify-content: center;           /*  added  */
}

＆＃13;

<div id="test">
  <ul>
    <li>
      <a href="">Two line Text</a>
      <a href="">Two line Text</a>
    </li>
    <li>
      <a href="">One line Text</a>
    </li>
    <li>
      <a href="">One line Text</a>
    </li>
  </ul>
</div>

＆＃13;

如果只有一个项目有两行文字，我们可以使用默认的行方向和align-items

＆＃13;

#test ul{
  display:flex;
  border:1px solid black;
  list-style: none;
  padding-left:0;
}
#test li{
  flex: 1;
  width:33.333333%;
  border-left:1px solid black;
  padding:10px;

  display:flex;                      /*  added  */
  align-items: center;               /*  added  */
}

＆＃13;

<div id="test">
  <ul>
    <li>
      <a href="">Two line Text<br>Two line Text</a>
    </li>
    <li>
      <a href="">One line Text</a>
    </li>
    <li>
      <a href="">One line Text</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

您需要稍微改变一下HTML结构。将align-items: stretch应用于ul。

#test ul {
  display: flex;
  align-items: stretch;
}

在li内部创建一个.inner div并将display: flex与align-items: center一起提供。

#test li {
  flex: 1;
  display: flex;
  align-items: center;
}

查看下面的工作代码段：

＆＃13;

#test ul{
  display: flex;
  align-items: stretch;
  border: 1px solid black;
  list-style: none;
  padding-left: 0;
}

#test li {
  flex: 1;
  display: flex;
  align-items: center;
  border-left: 1px solid black;
}

#test li:first-child {
  border-left: none;
}

#test li .inner {
  padding: 10px;
}

＆＃13;

<div id="test">
  <ul>
    <li>
      <div class="inner">
        <a href="">Two line Text</a><br/>
        <a href="">Two line Text</a>
      </div>
    </li>
    <li>
      <div class="inner">
        <a href="">One line Text</a>
      </div>
    </li>
    <li>
      <div class="inner">
        <a href="">One line Text</a>
      </div>
    </li>
  </ul>
</div>

＆＃13;

希望这有帮助！

垂直对齐flex 1内容

2 个答案: