css - Flex box child 的高度是 parent 的 100%

标签 css flexbox


以下是我的菜单结构:

<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

查看示例:http://cssdeck.com/labs/full/nttaiab7/

关于css - Flex box child 的高度是 parent 的 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19732965/

相关文章:

html - 当 flexbox 元素以列模式包装时,容器不会增加其宽度

css - Flexbox 在 Safari 上没有按预期换行。我究竟做错了什么?

css - 当 textarea 有值时更改标签颜色

javascript - 根据点击的元素切换多个元素的类

asp.net - CSS 更改未反射(reflect)在网站上

html - 使用 flex 截断文本溢出

html - 彩色背景停在页面底部,而不是内容,使用 Flex 布局

javascript - 弹出窗口不适用于谷歌地图

css - 移动 Chrome 上的字体大小 vw buggy

html - 为什么百分比填充/边距不适用于 Firefox 和 Edge 中的 flex 元素?