为什么我的“弹性包装”属性不能工作？

Question

为什么我的弹性包装属性不能工作？我在代码中犯了什么错误吗？

​

.container {
  border: solid black 2px;
  height: 600px;
  width: 650px;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div class="container">
  <div class="box" id="box-1">First Box</div>
  <div class="box" id="box-2">Second Box</div>
  <div class="box" id="box-3">Third Box</div>
  <div class="box" id="box-4">Fourth Box</div>
  <div class="box" id="box-5">Fifth Box</div>
</div>

​

Answer 1

试试这个，我已经降低了高度和宽度，而且它可以工作。

​

.container {
  border: solid black 2px;
  height: 100px;
  width: 100px;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div class="container">
  <div class="box" id="box-1">First Box</div>
  <div class="box" id="box-2">Second Box</div>
  <div class="box" id="box-3">Third Box</div>
  <div class="box" id="box-4">Fourth Box</div>
  <div class="box" id="box-5">Fifth Box</div>
</div>

​

Answer 2

如果你想写更多的句子，它会奏效的。或看到它在反应的情况下，发挥宽度，尝试300 in；

Answer 3

试着在350到400像素之间调整宽度。这可能有助于issue.Check W#Schools获得更多的理解。