Flexbox项目的高度相等

Question

我不能使flexbox项目的高度相同，而其中一项是更多的内容。因此，右边的边界不等于其他边界。

我想在所有相等的项目中获得边框（如下图中的红线所示）。

我该怎么做？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先，您必须从li中删除从顶部和底部创建空间的边距。第二，如果您想对齐中心项目，则必须将display:flex提供给li。希望这会对你有所帮助

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;