CSS柔性项默认高度问题

我正在学习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元素？

来源

2017-11-04 mystreie

1.调用容器中显示后：柔性，是没有高度预先设定的柔性项目将继承最大高度值的其他Flex项目？

行所有项目将采取他们的最大高度默认。

2.致电容器作为显示器后：柔性，我可以考虑它包含的所有项目将像直列blockelements？

是的，你可以使用display: inline-flex（找到更多信息在本页面inline-flex值）。

来源

2017-11-04 03:20:11

CSS柔性项默认高度问题

回答

相关问题