Flexbox与JS实现动态布局切换与元素重排
2025-08-06 23:52:30
0浏览
收藏
你在学习文章相关的知识吗？本文《使用Flexbox和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"> 和
- .container 是整个页面的主布局容器。
- .top 和 .bottom 是.container的子元素，用于划分上下区域。
- .textbox-row 是新增的容器，用于包裹一组相关的文本输入框。
CSS样式定义
CSS是实现布局视觉效果的关键。我们将利用Flexbox的强大功能来控制布局方向和内部元素的排列。
.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样式解释：
- .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与JS实现动态布局切换与元素重排》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！
购物车如何用Session保存商品数据
- 上一篇
- 购物车如何用Session保存商品数据
- 下一篇
- Win11跳过OOBE设置技巧汇总
查看更多
最新文章
-
- 文章 · 前端 | 2小时前 |
- Flex布局详解与适用场景分析
- 352浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- 定时器多次执行后自动停止技巧
- 125浏览 收藏
-
- 文章 · 前端 | 2小时前 | JavaScript 递归 reduce 数组扁平化 flat()
- JS数组扁平化5种实用方法
- 483浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- CSSmargin使用技巧与实战方法
- 455浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- JavaScript闭包生成随机数技巧
- 123浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- 微任务执行顺序解析与技巧
- 412浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- JavaScript内存泄漏检测技巧详解
- 211浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- HTML无限滚动实现与加载优化技巧
- 298浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- 点击按钮提交表单的实现方法
- 126浏览 收藏
-
- 文章 · 前端 | 2小时前 | 性能优化 CSS动画 @keyframes 内容分块滚动 分批出现
- CSS动画分块滚动实现方法
- 150浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 484次学习
查看更多
AI推荐
-
- 千音漫语
- 千音漫语，北京熠声科技倾力打造的智能声音创作助手，提供AI配音、音视频翻译、语音识别、声音克隆等强大功能，助力有声书制作、视频创作、教育培训等领域，官网：https://qianyin123.com
- 118次使用
-
- MiniWork
- MiniWork是一款智能高效的AI工具平台，专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具，提供精准智能解决方案，让复杂工作简单高效。
- 114次使用
-
- NoCode
- NoCode (nocode.cn)是领先的无代码开发平台，通过拖放、AI对话等简单操作，助您快速创建各类应用、网站与管理系统。无需编程知识，轻松实现个人生活、商业经营、企业管理多场景需求，大幅降低开发门槛，高效低成本。
- 130次使用
-
- 达医智影
- 达医智影，阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”，仅一次CT扫描即可高效识别多种癌症、急症及慢病，为疾病早期发现提供智能、精准的AI影像早筛解决方案。
- 122次使用
-
- 智慧芽Eureka
- 智慧芽Eureka，专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景，通过专家级AI Agent精准执行任务，智能化工作流解放70%生产力，让您专注核心创新。
- 127次使用
查看更多
相关文章
-
- 优化用户界面体验的秘密武器：CSS开发项目经验大揭秘
- 2023-11-03 501浏览
-
- 使用微信小程序实现图片轮播特效
- 2023-11-21 501浏览
-
- 解析sessionStorage的存储能力与限制
- 2024-01-11 501浏览
-
- 探索冒泡活动对于团队合作的推动力
- 2024-01-13 501浏览
-
- UI设计中为何选择绝对定位的智慧之道
- 2024-02-03 501浏览
