html - flex 盒元素的高度相等

Question

我不能使 flexbox 元素高度相同，而其中一个元素有更多内容。因此右边的边框与其他边框不等高。

我想在所有元素中实现相等的边框(如下图中的红线)。

我该怎么做？

.contacts-list {
  color: #333;
  display: flex;
  list-style-type: none;
  justify-content: space-between;
  align-content: center;
  align-items: center; 
  padding: 0 20px;
  font-size: 15px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.contacts-list li {
  flex: 1;
  margin: 20px;
  padding: 10px 20px;
  border-right: 1px solid #333;
  align-items: center;
}

.contacts-list__contact {
  text-transform: uppercase;
  font-size: 17px;
}

.contacts-list__address span {
display: flex;
}

<div class="contacts">
    <ul class="contacts-list">
      <li class="contacts-list__contact">Contact</li>
      <li class="contacts-list__address">
        <span>Company Name</span>
        <span>Address</span>
        <span>City</span>
     </li>
      <li class="contacts-list__phone">+ 1 123 456 78</li>
      <li class="contacts-list__email">some@funnyemail.com</li>
    </ul>
  </div>

Answer 1

首先，您必须从 li 中移除边距，这会在顶部和底部创建空间。其次，如果你想对齐中心元素，那么你必须将 display:flex 给 li。希望对你有帮助

.contacts-list {
  color: #333;
  display: flex;
  list-style-type: none;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 15px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.contacts-list li {
  flex: 1;
  display:flex;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-right: 1px solid #333;
  align-items: center;

}

.contacts-list__contact {
  text-transform: uppercase;
  font-size: 17px;
}

.contacts-list__address span {
display: flex;
}

<div class="contacts">
    <ul class="contacts-list">
      <li class="contacts-list__contact">Contact</li>
      <li class="contacts-list__address">
        <span>Company Name</span>
        <span>Address</span>
        <span>City</span>
     </li>
      <li class="contacts-list__phone">+ 1 123 456 78</li>
      <li class="contacts-list__email">some@funnyemail.com</li>
    </ul>
  </div>