flex 布局 子元素均匀分布

草莓千层蛋糕
1,852 阅读1分钟

「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」。

先看代码：

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        padding: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 80%;
        margin: 100px auto;
        border: 1px salmon solid;
      }
      li {
        margin-right: 15px;
        margin-bottom: 15px;
        width: 100px;
        list-style: none;
        height: 100px;
        background-color: rgb(101, 168, 46);
        border: 1px solid slateblue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

image.png

image.png

随着浏览器的缩放 里面的子元素 也会跟着换行，但是右边放不下一个盒子就会在下一行显示 这样不是我们想要的效果

ul加上


 justify-content: space-between;

image.png 但是你会发现效果不对劲

如果我多添加几个空白的盒子是不是就搞定了？

image.png

image.png

效果确实出来了

但是问题来了，empty盒子加多少个好呢？

比如我一行规定显示六个 缩放也是一行六个(这个是看比例的) 比如你父级元素是浏览器的100% 子元素是20% 这种怎么缩放一行都是显示4个

image.png

放大：6个一行 image.png 缩小：7个一行

image.png

代码：

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        height: auto;
        /* padding: 10px; */
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        width: 80%;
        /* width: 100%; */
        margin: 100px auto;
        border: 1px salmon solid;
      }
      li {
        /* margin-right: 15px; */
        /* margin-bottom: 15px; */
        margin: 10px;
        /* width: 100px; */
        width: 12.8%;
        /* width: 20%; */
        list-style: none;
        height: 100px;
        background-color: rgb(101, 168, 46);
        border: 1px solid slateblue;
      }
      .empty {
        margin: 10px;
        height: 0px;
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li class="empty"></li>
      <li class="empty"></li>
      <li class="empty"></li>
      <li class="empty"></li>
      <li class="empty"></li>
      <li class="empty"></li>
    </ul>
  </body>
</html>

一行都是显示三个/四个 怎么缩放都不会变形 均匀分布：

<!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>
      #container {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
      }

      .fengexian {
        margin-top: 50px;
        background: #f6f6f6;
        width: 100%;
        height: 2px;
      }

      /**类别**/
      .classify {
        width: 100%;
        height: auto;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
      }

      .bt_classify_name {
        margin: 5px;
        width: 20%;
        /* width: 30%; */
        /* width: 10%; */
        height: 30px;
        border-radius: 8px;
        background: #ededed;
      }

      .bt_classify_name_empty {
        margin: 5px;
        width: 20%;
        /* width: 30%; */
        /* width: 10%; */
        height: 0px;
      }

      .bg_color_CB0165 {
        background: #cb0165;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <!--分类，类别-->
      <div>
        <div id="dv_classify" class="classify">
          <button class="bt_classify_name">平面</button>

          <button class="bt_classify_name">平面</button>

          <button class="bt_classify_name">平面</button>

          <button class="bt_classify_name">平面</button>

          <button class="bt_classify_name">平面</button>

          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>
          <button class="bt_classify_name">平面</button>

          <button
            class="bt_classify_name_empty"
            style="visibility: hidden"
          ></button>
          <button
            class="bt_classify_name_empty"
            style="visibility: hidden"
          ></button>
          <button
            class="bt_classify_name_empty"
            style="visibility: hidden"
          ></button>
          <button
            class="bt_classify_name_empty"
            style="visibility: hidden"
          ></button>
        </div>
      </div>

      <div class="fengexian"></div>
    </div>
  </body>
</html>

image.png

avatar
文章
阅读
粉丝