我正在应用flex属性，但它不会膨胀或收缩

Question

   
    #container {
      height:800px;
      display:flex;
      
      text-align:center;
      background-color:grey;
      justify-content:flex-start;
      align-content:flex-start;
    }


    #container > div{

    }

    #box-1 {
      background-color:green;
      height:100px;
      
      width:25%;
     

    }
    #box-2 {
      background-color:yellow;
      height:100px;
      
      width:25%;
    }
    #box-3 {
      background-color:pink;
        height:100px;
     
      
      width:50%;
    }

    #box-4 {
      background-color:aqua;
      height:100px;
     
      width:50%;}

    #box-5 {
      background-color:blue;
      height:100px;
     
    width:50%;}

    #box-6 {
      height:100px;
      background-color:chocolate;
      flex:3 3 200px;
    width:25%;}

 <div id="container">
    <div id="box-1">1</div>
    <div id="box-2">2</div>
    <div id="box-3">3</div>
    <div id="box-4">4</div>
    <div id="box-5">5</div>
    <div id="box-6">6</div>
  </div>

您可以看到我正在尝试将flex属性添加到box-6，但是它什么也没做。有人可以解释一下为什么它什么都不做吗？提前致谢。我想看到这个box-6收缩速度快3倍，增长速度快3倍吗？我认为我没有特别添加任何可能破坏它的内容吗？因此想获得一些帮助。

Answer 1

我不知道为什么要使用百分比，但是我认为仅向所有元素添加并设置flex属性就可以解决此问题。

PermissionError: [WinError 5] Access is denied: 'odin' -> 'ddin'

#container {
      height:800px;
      display:flex;
      text-align:center;
      background-color:grey;
      justify-content:flex-start;
      align-content:flex-start;
    }


    #container > div{

    }

    #box-1 {
      background-color:green;
      height:100px;
      
      flex:1 1;
     

    }
    #box-2 {
      background-color:yellow;
      height:100px;
      
      flex:1 1;
    }
    #box-3 {
      background-color:pink;
        height:100px;
     
      
      flex:2 2;
    }

    #box-4 {
      background-color:aqua;
      height:100px;
     
      flex:2 2;}

    #box-5 {
      background-color:blue;
      height:100px;
     
    flex:2 2;}

    #box-6 {
      height:100px;
      background-color:chocolate;
      flex:3 3 200px}