css - 我正在应用flex属性，但它不会扩展或缩小

    #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倍吗？我认为我没有特别添加任何可能破坏它的内容吗？所以想得到一些帮助。

最佳答案

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

#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}

 <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>

关于css - 我正在应用flex属性，但它不会扩展或缩小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51346338/