html - Flexbox元素的高度相等

我不能使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">[email protected]</li>
    </ul>
  </div>

最佳答案

首先，您必须删除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">[email protected]</li>
    </ul>
  </div>

关于html - Flexbox元素的高度相等，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49706634/