Flex盒子的高度是父母的100%

时间:2013-11-01 18:24:53

标签: css3 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作为菜单,但不幸的是高度不同
所以我怎么能让孩子们使用flexbox 100%的父母而不在像素中添加自定义高度?

1 个答案:

答案 0 :(得分:1)

在ul&gt; li上添加align-self: stretch

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