当我调整屏幕大小时，如何让盒子相互包裹？（弹性盒）答案

【问题标题】：How do I make boxes wrap to each other when I resize the screen? (Flexbox)当我调整屏幕大小时，如何让盒子相互包裹？（弹性盒）
【发布时间】：2020-12-01 10:57:52
【问题描述】：

我对响应式设计和flexbox 的整个概念不熟悉。如何做到这一点，使盒子不会堆叠在一起？

<html>

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <Style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .box {
      height: 100px;
      text-align: center;
    }
    
    header {
      width: 100%;
      order: 1;
      background-color: lime
    }
    
    .red {
      width: 50%;
      order: 2;
      background-color: red
    }
    
    .orange {
      width: 50%;
      order: 3;
      background-color: orange
    }
    
    .footer {
      width: 100%;
      order: 4;
      background-color: darkblue
    }
    
    .light_blue {
      width: 20%;
      order: 5;
      background-color: lightblue
    }
    
    .green {
      width: 60%;
      order: 6;
      background-color: green
    }
    
    .light_green {
      width: 20%;
      order: 7;
      background-color: lightgreen
    }
  </style>
</head>

<body>
  <div class="container">
    <header class="box lime">
  </div>
  <div class="box red"></div>
  <div class="box orange"></div>
  <footer class="box dark_blue">
    </div>
    <div class="box light_blue"></div>
    <div class="box green"></div>
    <div class="box light_green"></div>
    </div>


</body>

</html>

【问题讨论】：

您的代码中有拼写错误，页眉作为 div 关闭，页脚也作为 div 关闭.. 正确关闭元素，您的代码将正常工作

标签： html css flexbox responsive

【解决方案1】：

Flexbox 更倾向于在内容动态时使容器适应行，因此您可能不知道最终的宽度或高度。

对于您的布局，我强烈建议使用经典的float，它也很容易使用mediaqueries 进行操作以使其响应。你的代码已经准备好了：

* {box-sizing:border-box;}

<html>

  <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <Style>
    .container {
    }
    .box {

      height: 100px;
      text-align: center;
}

    header      {width: 100%;float:left;background-color: lime; }
    .red        {width: 50%;float:left;background-color: red}
    .orange     {width: 50%;float:left;background-color: orange}
    .footer     {width: 100%; float:left;background-color: darkblue}
    .light_blue {width: 20%; float:left;background-color: lightblue}
    .green      {width: 60%; float:left;background-color: green}
    .light_green{width: 20%;float:left;background-color: lightgreen}

    </style>
  </head>
  <body>
    <div class="container">
      <header class="box lime"></div>
      <div class="box red"></div>
      <div class="box orange"></div>
      <footer class="box dark_blue"></div>
    <div class="box light_blue"></div>
    <div class="box green"></div>
    <div class="box light_green"></div>
    </div>


  </body>
  </html>

【讨论】：