3
我正在学习CSS柔性盒的东西,当我与它周围玩我发现了一个有线的事情:CSS柔性项默认高度问题
.container {
width: 100%;
display: flex;
border: 5px solid grey;
}
.box1 {
border: 2px solid red;
width: 30%;
height: 500px;
}
.box2 {
border: 2px solid blue;
width: 40%;
}
<body>
<div class="container">
<div class="box box1">
<p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p>
</div>
<div class="box box2">
<p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p>
</div>
<div class="box box3">
<p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p>
</div>
</div>
</body>
有线的事情是:我已经将box1元素的高度设置为500px,但从结果中,我看到box2获得了与500px默认值相同的高度,即使我没有在其上设置任何高度值。然后,我改变了BOX2高度值300像素并没有给出一个固定的高度上BOX3:
.box1{
border: 2px solid red;
width: 30%;
height: 500px;
}
.box2{
border: 2px solid blue;
width: 40%;
height:300px;
}
.box3{
border: 2px solid blue;
width:30%;
}
这次从结果我发现BOX3的高度为500像素,所以我的问题是:
调用容器作为
display:flex
后,是没有高度预先设定的柔性项目将继承最大HIGHT价值的其他Flex项目?调用容器作为
display:flex
后,可能我认为它包含的所有项目将像inline-block
元素?