柔性盒内的元件不具备所需的尺寸

Question

我想要一个flexbox，里面有一些元素。我尝试在宽度框内设置元素的宽度，例如每个宽度框设置为500px，但它们的宽度有限，并且它们没有采取所需的宽度。

以下是我的代码：

＆＃13;

＆＃13;

#container{
  display: inline-flex;
  border: 5px solid ;
  width: 20%;
  flex-wrap: 
}
.first{
  background-color: red;
  width: 300px;
}
.second{
  background-color: green;
  width: 400px;
}
.third{
  background-color: yellow;
  width: 400px
}

＆＃13;

<div id="container">
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
 
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  

  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

可以看出，css中指定的宽度大约需要400px，但是在生成的html中，它们并没有。我在做什么问题？

Answer 1

#container{flex-wrap:wrap;}

中有拼写错误

这里它按行方式工作

＆＃13;

＆＃13;

#container{
  display: inline-flex;
  border: 5px solid ;
  width: 20%;
  flex-wrap:wrap;
}
.first{
  background-color: red;
  width: 300px;
}
.second{
  background-color: green;
  width: 400px;
}
.third{
  background-color: yellow;
  width: 400px
}

＆＃13;

<div id="container">
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
 
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  

  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需更改display：inline-flex to flex，默认情况下flex-direction为row并使用flex-wrap：wrap，每个元素/ div都采用指定的宽度。

此外，您已将父容器的宽度指定为20％，因此其中的每个子/ div元素都将父元素的宽度作为基础，以便它不尊重它们的原因个别宽度，我已取下父宽度，现在你可以看到差异

希望有所帮助

检查代码段

＆＃13;

＆＃13;

#container{
  display: flex;
  border: 5px solid ;

  flex-wrap: wrap;
}
.first{
  background-color: red;
  width: 300px;
}
.second{
  background-color: green;
  width: 400px;
}
.third{
  background-color: yellow;
  width: 400px
}

＆＃13;

<div id="container">
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
 
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  

  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;