这是我第一次在HTML中使用Flexbox。我看了一些教程，一切似乎都相当容易。现在我只想使用弹性框创建一个小的 html 页面来练习它。在我开始之后，我遇到了一个问题，我已经用谷歌搜索了大约一个小时，我找不到任何人提到这个问题。我有一个容器弹性框，其中包含 3 个div。我希望它们彼此下方显示并设置大小，但是如果我设置"flex-direction：column"，它们将根据它们包含的文本量调整大小，并且它们似乎不使用我在样式中设置的属性.css。如果我设置"弹性方向：行;"我可以使用 flex 属性更改它们的大小。
这是我的代码：
<body>
<div class="container-1">
<div class="box-1">
<span id="title">Titel der notification</span>
<br>
<br>
<span class="validTime">Empfangen: October 9, 2018 3:40 PM</span><br>
<span class="validTime">Gültig bis: Oct 10, 2019, 3:40 PM</span>
<div style="display:flex">
<hr style="width:100%; margin-left:30px; margin-right:30px; margin-top:5px">
</div>
</div>
<div class="box-2">
<p style="margin-left:30px">Nachricht.. blablablabla</p>
</div>
<div class="box-3">
<div style="display:flex">
<hr style="width:100%; margin-left:30px; margin-right:30px; margin-top:5px">
</div>
<span>Verantwortlicher Michael</span><br>
<span>Verantwortliche Rolle: IT-Administration</span>
</div>
</div>
</body>
.CSS：
.container-1{
display:flex;
flex-direction:column;
}
.box-1{
flex:60;
}
.box-2{
flex:20;
}
.box-3{
flex:20;
}
请保持答案简单，我对Web开发相当陌生。
提前感谢！
.container-1 {
display: flex;
/* Then we define the flow direction
* and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: column;
* flex-wrap: wrap;
*/
flex-flow: column wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
}
显示 flex 应该添加到父类中，不需要添加 flex-direction： 列 .hope 这对你有用。
.container-1{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
/* flex-direction:column; */
}
.box-1{
flex: 60;
background: antiquewhite;
flex-wrap: wrap;
}
.box-2{
flex: 20;
background: aqua;
padding: 18px;
}
.box-3{
flex: 20;
background: lavender;
padding: 18px;
}<div class="container-1">
<div class="box-1">
<span id="title">Titel der notification</span>
<br>
<br>
<span class="validTime">Empfangen: October 9, 2018 3:40 PM</span><br>
<span class="validTime">Gültig bis: Oct 10, 2019, 3:40 PM</span>
<div>
<hr style="width:100%; margin-top:5px">
</div>
</div>
<div class="box-2">
<p style="margin-left:30px">Nachricht.. blablablabla</p>
</div>
<div class="box-3">
<div>
<hr style="width:100%; margin-left:-12px;margin-top:5px">
</div>
<span>Verantwortlicher Michael</span><br>
<span>Verantwortliche Rolle: IT-Administration</span>
</div>
</div>