动态Flexbox布局与嵌套元素重排教程-js教程-PHP中文网

动态Flexbox布局与嵌套元素重排教程

心靈之曲

发布： 2025-08-05 13:50:01

原创

310人浏览过

动态Flexbox布局与嵌套元素重排教程

本教程详细阐述如何利用HTML、CSS（Flexbox）和JavaScript实现网页布局的动态切换，包括主容器在垂直和水平方向上的布局转换，以及其中嵌套的输入框组的同步重排。文章通过实例代码演示了如何通过JavaScript动态调整CSS属性，以实现灵活且响应式的用户界面。

在现代web开发中，创建响应式且用户友好的界面至关重要。有时，我们需要根据用户交互或屏幕尺寸动态调整元素的布局。本教程将深入探讨如何使用css flexbox和javascript，实现一个容器的垂直/水平布局切换，并在此过程中同步重排其内部的文本输入框。

核心概念：Flexbox与DOM操作

本方案的核心在于Flexbox布局模型及其在不同flex-direction下的行为，以及通过JavaScript动态修改元素的CSS属性。

Flexbox (display: flex): 强大的CSS布局模块，用于在一维空间内（行或列）排列和对齐元素。
- flex-direction: 定义主轴方向（row为水平，column为垂直）。
- flex: 定义弹性项目在主轴上的伸缩能力。
- flex-wrap: 控制弹性项目是否换行。
JavaScript DOM操作: 通过JavaScript获取HTML元素，并修改其样式属性，以实现动态布局效果。

HTML结构

为了实现对输入框的精细控制，我们需要对原始HTML结构进行优化，将输入框进行分组。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态Flexbox布局与嵌套元素重排</title>
    <link rel="stylesheet" href="style.css">
</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 src="script.js"></script>
</body>
</html>

登录后复制

结构说明：

container：最外层容器，其flex-direction将由JavaScript控制，决定整体布局是垂直还是水平。
top：顶部区域，包含实际的输入框。它本身也是一个Flex容器，用于管理其子元素（即textbox-row）。
textbox-row：新增的div元素，用于将输入框进行分组（例如，每4个输入框一组）。这个分组是实现内部输入框重排的关键，因为我们将通过JavaScript动态修改它的display属性。
input[type="text"]：具体的文本输入框。
toggle-switch 和 label：用于触发布局切换的UI元素。

CSS样式

CSS负责定义元素的初始布局、外观以及在不同状态下的表现。

简篇AI排版

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

554

查看详情

/* 主容器样式 */
.container {
  display: flex; /* 默认使用Flexbox */
  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; /* 允许内部输入框换行 */
  margin: 5px; /* 组间距 */
}

/* 输入框样式 */
.textbox-row input[type="text"] {
  margin: 5px; /* 输入框间距 */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 切换开关的隐藏样式 */
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 input[type="text"] {
    margin: 0 5px 0 0; /* 调整输入框在大屏幕下的间距 */
  }

  /* 覆盖原始的input[type="text"] margin-bottom */
  input[type="text"] {
    margin-bottom: 0;
  }
}

登录后复制

CSS说明：

.container：默认flex-direction: column，实现垂直堆叠布局。
.top：内部的textbox-row元素将根据其父容器（.top）的Flex行为和自身的display属性进行排列。flex-wrap: wrap允许textbox-row在水平空间不足时换行。
.textbox-row：默认display: flex; flex-wrap: wrap;，这意味着它内部的输入框会水平排列并自动换行。
媒体查询 (@media)：在屏幕宽度大于768px时，.container默认变为flex-direction: row（水平布局），并且.textbox-row的display属性被设置为block。这意味着在宽屏下，默认情况下textbox-row组会垂直堆叠，而组内的输入框则根据其自身的流式布局（通常是内联并自动换行）。

JavaScript逻辑

JavaScript函数toggleDivs()负责监听切换开关的点击事件，并根据当前布局状态动态修改container和textbox-row的样式。

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"; // 设置为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"; // 设置为block，使每个textbox-row占据一行并垂直堆叠
    });
  }
}

登录后复制

JavaScript说明：