Html 垂直对齐flex 1内容

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

我需要使所有的

元素保持相同的高度，但还要将它们居中对齐，这似乎是我无法做到的（）：

#测试ul{
显示器：flex；
边框：1px纯黑；
列表样式：无；
左侧填充：0；
}
#测试李{
弹性：1；
宽度：33.333%；
左边框：1px纯黑；
填充：10px；
}

您需要稍微更改HTML结构，并应用

对齐项：将
拉伸到
ul

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

然后在
li
内部创建一个
.internal
div，并将
显示：flex
与
对齐项目：居中

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

请查看下面的工作代码段：


#测试ul{
显示器：flex；
对齐项目：拉伸；
边框：1px纯黑；
列表样式：无；
左侧填充：0；
}
#测试李{
弹性：1；
显示器：flex；
对齐项目：居中；
左边框：1px纯黑；
}
#李：第一个孩子{
左边界：无；
}
#测试李。内{
填充：10px；
}











对齐项目
默认为
拉伸
，这使得
li
填充
ul
的高度

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

将其更改为
居中
，方法是添加
对齐项目：居中#test ul
规则，代码>将使它们垂直居中对齐（这将使
li
折叠为其内容）


#测试ul{
显示器：flex；
对齐项目：居中；/*已添加*/
边框：1px纯黑；
列表样式：无；
左侧填充：0；
}
#测试李{
弹性：1；
宽度：33.333%；
左边框：1px纯黑；
填充：10px；
}











所以你知道，Stack Overflow有一个称为“snippets”的简洁功能——基本上，你可以在你的问题中嵌入类似codepen的东西。你不需要链接到一个非现场的东西，它可能会也可能不会经常中断。另外，我不确定这是否有效，但如果有效，我会给出一个答案。您是否可以在
中设置上/下边框（或左/右，取决于UL的方向），并将其他边框设置在
上？这将使边框保持对齐，同时使它们之间也有边框。@David根本不需要更改标记，请检查我的answer@SauravRastogi代表少于15的用户不能upvote@LGSon可能在
li
内部也有其他内容。所以
flex-direction:column
总是将每个子元素视为一个单独的实体，这会降低布局的灵活性。@SauravRastogi嗯，有很多可能会破坏任何建议的解决方案，那么为什么只使用一个额外的元素呢？