使用Flexbox和JavaScript实现动态布局切换与内部元素重排-js教程-PHP中文网

使用Flexbox和JavaScript实现动态布局切换与内部元素重排

本教程详细阐述如何利用CSS Flexbox和JavaScript实现网页布局的动态切换，包括主容器的垂直/水平方向调整，以及内部文本输入框的同步重排。通过精心设计的HTML结构、CSS样式和JavaScript逻辑，我们能够创建一个响应式且用户友好的界面，允许用户根据需求灵活切换内容展示方式，确保不同布局下内部元素都能以期望的方式排列。

在现代web开发中，创建灵活且响应式的用户界面至关重要。本教程将指导您如何构建一个系统，允许用户通过一个简单的切换开关，不仅改变页面主区域的布局方向（从垂直到水平或反之），还能同时调整内部复杂元素的排列方式（例如，将多个输入框从垂直堆叠变为水平排列，并按组换行）。

核心概念与技术栈

本解决方案主要依赖以下技术：

CSS Flexbox: 用于实现容器的灵活布局，包括主容器的方向控制和内部元素的分组排列。
JavaScript: 用于监听用户交互（切换开关），并动态修改CSS样式，从而实现布局的切换效果。
HTML结构: 通过嵌套div元素来组织内容，为Flexbox提供清晰的布局上下文。

HTML结构设计

为了实现内部文本框的分组排列，我们需要在HTML结构上做一些调整。不再将所有文本框直接放置在.top容器内，而是将它们按逻辑分组，并用一个带有特定类的div（例如.textbox-row）包裹起来。

<input type="checkbox" id="toggle-switch" onclick="toggleDivs()" />
<label for="toggle-switch"></label>

<div class="container">
  <div class="top">
    <!-- 第一组文本框 -->
    <div class="textbox-row">
      <input type="text" placeholder="Text box 1" />
      <input type="text" placeholder="Text box 2" />
      <input type="text" placeholder="Text box 3" />
      <input type="text" placeholder="Text box 4" />
    </div>
    <!-- 第二组文本框 -->
    <div class="textbox-row">
      <input type="text" placeholder="Text box 5" />
      <input type="text" placeholder="Text box 6" />
      <input type="text" placeholder="Text box 7" />
      <input type="text" placeholder="Text box 8" />
    </div>
  </div>
  <div class="bottom"></div>
</div>

登录后复制

在这个结构中：

<input type="checkbox"> 和 <label> 共同创建了一个可切换的UI元素。
.container 是整个页面的主布局容器。
.top 和 .bottom 是.container的子元素，用于划分上下区域。
.textbox-row 是新增的容器，用于包裹一组相关的文本输入框。

CSS样式定义

CSS是实现布局视觉效果的关键。我们将利用Flexbox的强大功能来控制布局方向和内部元素的排列。

立即学习“Java免费学习笔记（深入）”；

.container {
  display: flex;
  flex-direction: column; /* 默认垂直布局 */
  height: 100vh;
}

.top {
  flex: 3; /* 占据容器3份空间 */
  background-color: blue;
  border: 1px solid black;
  display: flex; /* 自身也是Flex容器 */
  flex-wrap: wrap; /* 允许子元素换行 */
  align-items: center;
  justify-content: center;
}

.bottom {
  flex: 7; /* 占据容器7份空间 */
  background-color: green;
  border: 1px solid black;
}

/* 文本框组的样式 */
.textbox-row {
  display: flex; /* 默认水平排列文本框 */
  flex-wrap: wrap; /* 允许文本框在行内换行 */
}

.textbox-row input[type="text"] {
  margin: 5px; /* 文本框之间的间距 */
}

/* 隐藏复选框，使用label作为切换开关的视觉元素 */
input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 50px;
  height: 25px;
  background-color: grey;
  display: block;
  border-radius: 100px;
  position: relative;
  margin: 10px; /* 为开关添加一些外部间距 */
}

label:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 23px;
  height: 23px;
  background-color: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label:before {
  left: calc(100% - 1px);
  transform: translateX(-100%);
}

/* 响应式设计：当屏幕宽度大于768px时，默认容器水平布局 */
@media screen and (min-width: 768px) {
  .container {
    flex-direction: row; /* 在宽屏下默认水平布局 */
  }

  /* 在宽屏下，文本框组默认垂直堆叠，每个文本框之间有特定间距 */
  .textbox-row {
    display: block; /* 使得每个textbox-row占据一行，实现垂直堆叠 */
  }

  .textbox-row input[type="text"] {
    margin: 0 5px 0 0; /* 调整文本框间距 */
  }
}

登录后复制

CSS样式解释：

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

.container 默认设置为 flex-direction: column，实现上下布局。
.top 内部也设置为 display: flex 和 flex-wrap: wrap，以便其子元素（即.textbox-row）可以水平排列并换行。
.textbox-row 默认 display: flex，这使得其内部的输入框水平排列。
媒体查询 (@media screen and (min-width: 768px)) 用于实现响应式布局。在宽屏下，.container 默认变为 flex-direction: row，同时 .textbox-row 被设置为 display: block，使其内部的文本框垂直堆叠。这是为了实现宽屏下的默认行为。

JavaScript逻辑实现

JavaScript函数 toggleDivs() 是实现动态切换的核心。它会根据当前布局状态，修改.container的flex-direction属性，并同时调整.textbox-row元素的display属性。

function toggleDivs() {
  var container = document.querySelector(".container");
  var top = document.querySelector(".top");
  var bottom = document.querySelector(".bottom");
  var textboxRows = document.querySelectorAll(".textbox-row"); // 获取所有textbox-row元素

  if (container.style.flexDirection === "column") {
    // 当前是垂直布局，切换到水平布局
    container.style.flexDirection = "row";
    top.style.flex = "3";
    bottom.style.flex = "7";
    top.style.height = "auto";
    bottom.style.height = "auto";

    // 当容器水平布局时，textbox-row应水平排列其内部元素
    textboxRows.forEach((row) => {
      row.style.display = "flex"; 
    });
  } else {
    // 当前是水平布局，切换到垂直布局
    container.style.flexDirection = "column";
    top.style.flex = "3";
    bottom.style.flex = "7";
    top.style.height = "100%";
    bottom.style.height = "100%";

    // 当容器垂直布局时，textbox-row应垂直堆叠其内部元素
    textboxRows.forEach((row) => {
      row.style.display = "block";
    });
  }
}

登录后复制

JavaScript逻辑解释：

函数首先获取.container、.top、.bottom和所有.textbox-row元素。
它检查.container当前的flexDirection。
- 如果当前是"column"（垂直布局），则将其切换为"row"（水平布局）。同时，遍历所有的.textbox-row元素，将其display属性设置为"flex"，这样每个.textbox-row内部的文本框就会水平排列。
- 如果当前是"row"（水平布局），则将其切换为"column"（垂直布局）。同时，遍历所有的.textbox-row元素，将其display属性设置为"block"，这样每个.textbox-row将占据一行，从而实现文本框的垂直堆叠效果。

完整代码示例

将上述HTML、CSS和JavaScript代码整合到您的项目中，即可实现动态布局切换与内部元素重排功能。

index.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态布局切换与内部元素重排</title>
    <style>
        /* CSS样式 */
        body {
            margin: 0;
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
        }

        .container {
            display: flex;
            flex-direction: column; /* 默认垂直布局 */
            height: 100vh;
            width: 100%; /* 确保容器宽度 */
        }

        .top {
            flex: 3;
            background-color: lightblue; /* 更改颜色以区分 */
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            padding: 10px; /* 增加内边距 */
        }

        .bottom {
            flex: 7;
            background-color: lightgreen; /* 更改颜色以区分 */
            border: 1px solid black;
        }

        /* 文本框组的样式 */
        .textbox-row {
            display: flex; /* 默认水平排列文本框 */
            flex-wrap: wrap; /* 允许文本框在行内换行 */
            margin-bottom: 10px; /* 组之间间距 */
        }

        .textbox-row input[type="text"] {
            margin: 5px; /* 文本框之间的间距 */
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            min-width: 120px; /* 确保文本框有最小宽度 */
        }

        /* 切换开关样式 */
        input[type="checkbox"] {
            height: 0;
            width: 0;
            visibility: hidden;
        }

        label {
            cursor: pointer;
            text-indent: -9999px;
            width: 50px;
            height: 25px;
            background-color: grey;
            display: block;
            border-radius: 100px;
            position: relative;
            margin: 20px auto; /* 居中显示开关 */
        }

        label:before {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            width: 23px;
            height: 23px;
            background-color: #fff;
            border-radius: 90px;
            transition: 0.3s;
        }

        input:checked + label {
            background-color: #66bb6a; /* 选中时背景色 */
        }

        input:checked + label:before {
            left: calc(100% - 1px);
            transform: translateX(-100%);
        }

        /* 响应式设计 */
        @media screen and (min-width: 768px) {
            .container {
                flex-direction: row; /* 在宽屏下默认水平布局 */
            }

            .textbox-row {
                display: block; /* 在宽屏下，默认垂直堆叠文本框组 */
                width: 100%; /* 确保每个textbox-row占据一行 */
                margin-bottom: 10px; /* 组之间间距 */
            }

            .textbox-row input[type="text"] {
                margin: 0 5px 10px 0; /* 调整文本框间距，底部留白 */
            }

            .top {
                align-items: flex-start; /* 文本框组顶部对齐 */
                justify-content: flex-start; /* 文本框组左对齐 */
            }
        }
    </style>
</head>
<body>
    <input type="checkbox" id="toggle-switch" onclick="toggleDivs()" />
    <label for="toggle-switch"></label>

    <div class="container">
        <div class="top">
            <div class="textbox-row">
                <input type="text" placeholder="Text box 1" />
                <input type="text" placeholder="Text box 2" />
                <input type="text" placeholder="Text box 3" />
                <input type="text" placeholder="Text box 4" />
            </div>
            <div class="textbox-row">
                <input type="text" placeholder="Text box 5" />
                <input type="text" placeholder="Text box 6" />
                <input type="text" placeholder="Text box 7" />
                <input type="text" placeholder="Text box 8" />
            </div>
        </div>
        <div class="bottom"></div>
    </div>

    <script>
        // JavaScript逻辑
        function toggleDivs() {
            var container = document.querySelector(".container");
            var top = document.querySelector(".top");
            var bottom = document.querySelector(".bottom");
            var textboxRows = document.querySelectorAll(".textbox-row");

            if (container.style.flexDirection === "column") {
                // 当前是垂直布局，切换到水平布局
                container.style.flexDirection = "row";
                top.style.flex = "3";
                bottom.style.flex = "7";
                top.style.height = "auto";
                bottom.style.height = "auto";

                // 当容器水平布局时，textbox-row应水平排列其内部元素
                textboxRows.forEach((row) => {
                    row.style.display = "flex"; 
                });
                // 调整top容器内部元素的对齐方式，以适应水平布局
                top.style.alignItems = "center";
                top.style.justifyContent = "center";

            } else {
                // 当前是水平布局，切换到垂直布局
                container.style.flexDirection = "column";
                top.style.flex = "3";
                bottom.style.flex = "7";
                top.style.height = "100%";
                bottom.style.height = "100%";

                // 当容器垂直布局时，textbox-row应垂直堆叠其内部元素
                textboxRows.forEach((row) => {
                    row.style.display = "block";
                });
                // 调整top容器内部元素的对齐方式，以适应垂直布局
                top.style.alignItems = "flex-start";
                top.style.justifyContent = "flex-start";
            }
        }

        // 初始化布局，以匹配媒体查询的默认行为
        // 首次加载时，根据屏幕宽度设置初始布局
        window.onload = function() {
            var container = document.querySelector(".container");
            var top = document.querySelector(".top");
            var textboxRows = document.querySelectorAll(".textbox-row");
            if (window.innerWidth >= 768) {
                container.style.flexDirection = "row";
                textboxRows.forEach((row) => {
                    row.style.display = "block";
                });
                top.style.alignItems = "flex-start";
                top.style.justifyContent = "flex-start";
            } else {
                container.style.flexDirection = "column";
                textboxRows.forEach((row) => {
                    row.style.display = "flex";
                });
                top.style.alignItems = "center";
                top.style.justifyContent = "center";
            }
        };

        // 监听窗口大小变化，确保布局在切换后仍能响应式调整
        window.onresize = function() {
            // 当窗口大小变化时，如果当前不是通过开关切换的布局，则根据媒体查询调整
            // 否则，保持通过开关设定的布局，但可以重新评估textbox-row的布局
            var container = document.querySelector(".container");
            var top = document.querySelector(".top");
            var textboxRows = document.querySelectorAll(".textbox-row");

            if (window.innerWidth >= 768) {
                // 如果当前是垂直布局，并且屏幕变大，则应切换为水平
                if (container.style.flexDirection === "column") {
                    container.style.flexDirection = "row";
                    textboxRows.forEach((row) => {
                        row.style.display = "block";
                    });
                    top.style.alignItems = "flex-start";
                    top.style.justifyContent = "flex-start";
                }
            } else {
                // 如果当前是水平布局，并且屏幕变小，则应切换为垂直
                if (container.style.flexDirection === "row") {
                    container.style.flexDirection = "column";
                    textboxRows.forEach((row) => {
                        row.style.display = "flex";
                    });
                    top.style.alignItems = "center";
                    top.style.justifyContent = "center";
                }
            }
        };
    </script>
</body>
</html>

登录后复制

注意事项与总结

嵌套Flexbox的威力: 成功的关键在于.container和.top都作为Flex容器，以及引入.textbox-row作为中间层。这种嵌套允许您在不同层级上独立控制布局，同时通过JavaScript进行协调。
JavaScript与CSS的协同: JavaScript负责动态修改CSS属性，而CSS则定义了不同状态下的视觉表现。这种分离使得代码更易于维护和理解。
响应式设计: 媒体查询 (@media) 确保了在不同屏幕尺寸下，页面的默认布局行为是合理的。JavaScript的切换功能在此基础上提供额外的用户控制。为了更健壮，您可能需要在toggleDivs函数中考虑如何与媒体查询的默认行为更好地协同，例如在切换后，如果屏幕尺寸再次跨越媒体查询的断点，是否需要重新应用默认样式或保持用户选择的样式。在上述完整代码中，我增加了window.onload和window.onresize事件，以更好地处理初始加载和窗口大小变化时的响应式行为。
可访问性: 确保您的切换开关（input type="checkbox"和label）具有良好的可访问性，例如使用aria-label或title属性提供更多上下文信息。
性能优化: 对于更复杂的应用，频繁的DOM操作可能影响性能。在本例中，操作的元素数量较少，性能影响可忽略不计。但对于大量元素的动态布局，可以考虑使用CSS类切换而非直接操作style属性，因为浏览器对CSS类的优化通常更好。

通过本教程，您应该能够理解并实现一个功能强大且灵活的动态布局切换系统，为用户提供更佳的交互体验。

以上就是使用Flexbox和JavaScript实现动态布局切换与内部元素重排的详细内容，更多请关注php中文网其它相关文章！