flex布局演示(可线上运行项目)

最新推荐文章于 2024-02-12 22:19:08 发布

苦涩精灵

最新推荐文章于 2024-02-12 22:19:08 发布

阅读量971

点赞数 2

分类专栏： Web 文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_43873198/article/details/122081249

版权

Web 专栏收录该内容

118 篇文章 10 订阅

订阅专栏

flex布局演示（可线上运行项目）

代码：

<!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;
      }
      div {
        width: 700px;
        height: 550px;
        padding: 10px;
        border: 1px solid gray;
      }
      h4 {
        margin: 10px 0 10px 10px;
      }
      button {
        width: 120px;
        height: 30px;
        margin: 0 10px;
      }

      div ul {
        display: flex;
        width: 100%;
        height: 550px;
        list-style: none;
        text-decoration: none;
      }
      div ul li {
        float: left;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border: 1px solid black;
      }
      .f1-1 {
        flex-flow: row nowrap;
      }
      .f1-2 {
        flex-flow: row-reverse nowrap;
      }
      .f1-3 {
        flex-flow: column nowrap;
      }
      .f1-4 {
        flex-flow: column-reverse nowrap;
      }
      .f2-1 {
        flex-flow: row nowrap;
      }
      .f2-2 {
        flex-flow: row wrap;
      }
      .f2-3 {
        flex-flow: row wrap-reverse;
      }
      .f3-1 {
        justify-content: flex-start;
      }
      .f3-2 {
        justify-content: flex-end;
      }
      .f3-3 {
        justify-content: center;
      }
      .f3-4 {
        justify-content: space-around;
      }
      .f3-5 {
        justify-content: space-between;
      }
      .f3-6 {
        justify-content: space-evenly;
      }
      .f4-1 {
        align-items: flex-start;
      }
      .f4-2 {
        align-items: flex-end;
      }
      .f4-3 {
        align-items: center;
      }
      .f4-4 {
        align-items: stretch;
      }
      .f4-5 {
        align-items: baseline;
      }
      .f5-1 {
        flex-flow: row wrap;
        align-content: flex-start;
      }
      .f5-2 {
        flex-flow: row wrap;
        align-content: flex-end;
      }
      .f5-3 {
        flex-flow: row wrap;
        align-content: center;
      }
      .f5-4 {
        flex-flow: row wrap;
        align-content: stretch;
      }
      .f5-5 {
        flex-flow: row wrap;
        align-content: space-around;
      }
      .f5-6 {
        flex-flow: row wrap;
        align-content: space-between;
      }
      .f6-1 {
        flex: 1;
      }
      .f6-2 {
        flex: 2;
      }
      .f6-3 {
        flex: 3;
      }
      .f6-4 {
        flex: 4;
      }
    </style>
  </head>
  <body>
    <h4>flex-direction 属性用来决定主轴的方向</h4>
    <button onclick="fn('f1','1')">row(默认)</button>
    <button onclick="fn('f1','2')">row-reverse</button>
    <button onclick="fn('f1','3')">column</button>
    <button onclick="fn('f1','4')">column-reverse</button>
    <hr />
    <h4>
      flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行
    </h4>
    <button onclick="fn('f2','1')">nowrap(默认)</button>
    <button onclick="fn('f2','2')">wrap</button>
    <button onclick="fn('f2','3')">wrap-reverse</button>
    <hr />
    <h4>justify-content 属性用于设置弹性盒子中元素在主轴方向上的对齐方式</h4>
    <button onclick="fn('f3','1')">flex-start(默认)</button>
    <button onclick="fn('f3','2')">flex-end</button>
    <button onclick="fn('f3','3')">center</button>
    <button onclick="fn('f3','4')">space-around</button>
    <button onclick="fn('f3','5')">space-between</button>
    <button onclick="fn('f3','6')">space-evenly</button>
    <hr />
    <h4>
      align-items
      属性用来设置弹性盒子中元素在侧轴方向上的对齐方式（单行，即，direction:nowrap）
    </h4>
    <button onclick="fn('f4','1')">flex-start(默认)</button>
    <button onclick="fn('f4','2')">flex-end</button>
    <button onclick="fn('f4','3')">center</button>
    <button onclick="fn('f4','4')">stretch</button>
    <button onclick="fn('f4','5')">baseline</button>
    <hr />
    <h4>
      align-content
      属性用来设置弹性盒子中元素在侧轴方向上的对齐方式（多行，即，direction:wrap）
    </h4>
    <button onclick="fn('f5','1')">flex-start(默认)</button>
    <button onclick="fn('f5','2')">flex-end</button>
    <button onclick="fn('f5','3')">center</button>
    <button onclick="fn('f5','4')">stretch</button>
    <button onclick="fn('f5','5')">space-between</button>
    <button onclick="fn('f5','6')">space-around</button>
    <hr />
    <h4>flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写</h4>
    <button onclick="custom()">自定义宽度</button>

    <div>
      <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li x>E</li>
        <li x>F</li>
        <li x>G</li>
        <li x>H</li>
        <li x>I</li>
        <li x>J</li>
        <li x>K</li>
        <li x>L</li>
        <li x>M</li>
        <li x>N</li>
        <li x>O</li>
        <li x>P</li>
      </ul>
    </div>

    <script>
      let nodes = document.querySelector("ul");
      function fn(type, no) {
        changeStretch(false);
        switch (type) {
          case "f2":
            document.querySelectorAll("li").forEach((item) => {
              if (item.hasAttribute("x")) {
                item.removeAttribute("hidden");
              }
            });
            break;
          case "f1":
          case "f3":
            document.querySelectorAll("li").forEach((item) => {
              if (item.hasAttribute("x")) {
                item.setAttribute("hidden", true);
              }
            });
            break;
          case "f4":
            document.querySelectorAll("li").forEach((item) => {
              if (item.hasAttribute("x")) item.setAttribute("hidden", true);
              if (no === "4") changeStretch(true);
            });
            break;
          case "f5":
            document.querySelectorAll("li").forEach((item) => {
              if (item.hasAttribute("x")) item.removeAttribute("hidden");
              if (no === "4") changeStretch(true);
            });
            break;
          default:
            break;
        }
        nodes.className = type + "-" + no;
      }
      function changeStretch(state) {
        document.querySelectorAll("li").forEach((item) => {
          if (state) {
            item.style.height = "100%";
          } else {
            item.style.height = "80px";
          }
        });
      }
      function custom() {
        const list = document.querySelectorAll("li");
        list.forEach((item, index) => {
          if (index < 4) {
            item.className = `f6-${index}`;
          }
          if (item.hasAttribute("x")) {
            item.setAttribute("hidden", true);
          }
        });
      }
    </script>
  </body>
</html>

线上运行项目
在这里插入图片描述

苦涩精灵

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
flex布局演示(可线上运行项目)

flex布局演示（项目可线上运行项目）代码：<!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
复制链接

扫一扫