调整屏幕大小时如何使盒子彼此包裹？ Flexbox

问题描述

我对自适应设计和flexbox的整个概念是陌生的。我该如何做，以免箱子彼此叠放？

something like this

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

解决方法

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>

flexbox html responsive

调整屏幕大小时如何使盒子彼此包裹？ Flexbox

问题描述

解决方法

相关问答