Flexbox项目无法等高求助：如何实现右侧边框高度一致？

嗨，我来帮你搞定这个Flexbox的小问题～你现在遇到的边框不齐的核心原因，是父容器里的align-items: center属性在搞事情：它会让所有Flex子项在垂直方向上居中对齐，而不是自动拉伸填充整个容器的高度，所以内容少的项就会比内容多的矮，边框自然就对不齐啦。

给你两个针对性的解决方案，按需选择：

方案1：让子项自动拉伸填充高度 #

直接修改父容器的align-items属性，或者干脆删掉它（因为Flex容器默认的align-items值就是stretch）：

.contacts-list {
  color: #333;
  display: flex;
  list-style-type: none;
  justify-content: space-between;
  /* 删掉或替换align-items: center */
  align-items: stretch; /* 可以直接写这个，或者省略，默认就是该值 */
  padding: 0 20px;
  font-size: 15px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
/* 另外提一句：align-content: center只在子项换行的多行布局里生效，你这里是单行，这个属性可以删掉，没用 */

这样修改后，所有子项都会自动拉伸到和父容器一样的高度，边框就会像你图里红线标注的那样完美对齐了。

方案2：保持子项高度一致，同时让内容垂直居中 #

如果你希望子项里的内容是垂直居中的，但又要保持子项高度一致，那就别在父容器上设align-items: center，而是给每个子项单独加Flex布局：

假设你的子项类名是.contacts-item，添加以下CSS：

.contacts-item {
  display: flex;
  align-items: center;
  /* 可以根据需求加padding/margin来调整内容的水平间距 */
}

这样既保证了所有子项高度和父容器一致，边框对齐，又能让子项内部的内容垂直居中，一举两得～

内容的提问来源于stack exchange，提问作者Michael Cordescu