以下是我的菜单结构:
<ul>
<li> menu 1</li>
<li> menu 2<br/> description</li>
<li> menu 3</li>
<li> menu 4</li>
</ul>
正如您注意到的,第二个菜单的高度与其他菜单的高度不同,这是因为它的内容
所以看看css
ul{
display:flex;
flex-direction:row;
flex-wrap: nowrap;
}
ul>li{
background-color:blue;
border:2px solid red;
}
这会将 ul 显示为一个菜单,其中的元素并排显示在包含父级“ul”的中心,但不幸的是高度不同
那么我如何让 child 使用 flexbox 拥有 100% 的 parent 而不添加自定义像素高度?
最佳答案
在 ul>li 上放置一个 align-self: stretch
。
关于css - Flex box child 的高度是 parent 的 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19732965/