纯HTML+CSS实现flex响应式布局

最新推荐文章于 2024-08-20 13:42:14 发布

重工潇洒哥

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量168

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_49554584/article/details/130767748

版权

优点：解决了最后一行的bug

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .big_box {
      --base-width: 500px;
      --base-margin: 10px;
      display: flex;
      flex-wrap: wrap;
      margin: calc(-1 * var(--base-margin)) 0 0 calc(-1 * var(--base-margin));
      padding: var(--base-margin);
    }

    .item_box {
      flex: 1 1 var(--base-width);
      height: 500px;
      margin: var(--base-margin) 0 0 var(--base-margin);
      background: oldlace;
    }

    i {
      flex: 1 0 var(--base-width);
      margin-left: var(--base-margin);
    }
  </style>
</head>

<body>
  <div class="big_box">
    <div class="item_box">1</div>
    <div class="item_box">2</div>
    <div class="item_box">3</div>
    <div class="item_box">4</div>
    <div class="item_box">5</div>
    <div class="item_box">6</div>
    <div class="item_box">7</div>
    <div class="item_box">8</div>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  </div>
</body>

</html>

截图：