在现代web开发中，创建响应式且交互性强的用户界面是至关重要的。本教程将深入探讨一个常见需求：如何在一个容器（div）的布局方向（垂直或水平）发生变化时，同时调整其内部子元素的排列方式，特别是针对一组文本输入框。我们将使用css flexbox进行布局控制，并结合javascript实现动态切换功能。
核心概念：Flexbox与动态布局
Flexbox（弹性盒子）是CSS3中一种强大的布局模式，它提供了一种在容器中对项目进行对齐、方向和顺序控制的方法。通过设置display: flex，我们可以将一个元素变为弹性容器，并通过flex-direction、justify-content、align-items、flex-wrap等属性来控制其子元素（弹性项目）的布局。
本教程的核心思想是：
- 容器方向切换： 通过JavaScript动态改变主容器的flex-direction属性，实现整体布局的垂直/水平切换。
- 内部元素重排： 为了在水平布局时实现多行排列（例如，每行4个文本框），我们需要将文本框进行逻辑分组。然后，在JavaScript切换布局时，动态调整这些分组的display属性（flex用于水平排列，block用于垂直堆叠）。
HTML结构优化
为了实现文本框的动态重排，我们需要对原始HTML结构进行微调。关键在于引入额外的div元素来逻辑性地包裹每组文本框。这将使我们能够独立地控制这些组的布局。
动态Flexbox布局
在上述HTML中，我们为每4个文本框添加了一个div包裹，并赋予了textbox-row类。这样，我们就可以针对这些行应用不同的Flexbox规则。
CSS样式定义
CSS是实现布局和视觉效果的关键。我们将定义主容器、顶部/底部区域以及新引入的textbox-row类的样式。同时，为了实现响应式设计，我们会使用媒体查询。
/* 主容器样式 */
.container {
display: flex; /* 启用Flexbox */
flex-direction: column; /* 默认垂直排列 */
height: 100vh; /* 占据整个视口高度 */
}
/* 顶部区域样式 */
.top {
flex: 3; /* 占据3份空间 */
background-color: #e0f7fa; /* 淡蓝色背景 */
border: 1px solid #b2ebf2;
display: flex; /* 启用Flexbox，用于内部textbox-row的布局 */
flex-wrap: wrap; /* 允许换行 */
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
padding: 10px;
}
/* 底部区域样式 */
.bottom {
flex: 7; /* 占据7份空间 */
background-color: #c8e6c9; /* 淡绿色背景 */
border: 1px solid #a5d6a7;
}
/* 文本框行容器样式 */
.textbox-row {
display: flex; /* 默认设置为flex，实现水平排列 */
flex-wrap: wrap; /* 允许文本框在行内换行 */
justify-content: center; /* 文本框在行内居中 */
width: 100%; /* 确保行容器占据父容器的全部宽度 */
margin-bottom: 10px; /* 垂直模式下行间距 */
}
/* 文本框样式 */
.textbox-row input[type="text"] {
margin: 5px; /* 文本框间距 */
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* 边框和内边距包含在宽度内 */
flex-grow: 1; /* 允许文本框在行内伸展 */
min-width: 150px; /* 最小宽度 */
}
/* 隐藏的复选框样式 */
input[type="checkbox"] {
height: 0;
width: 0;
visibility: hidden;
}
/* 切换开关的标签样式 */
label {
cursor: pointer;
text-indent: -9999px;
width: 50px;
height: 25px;
background-color: #bdbdbd; /* 灰色背景 */
display: block;
border-radius: 100px;
position: relative;
margin: 20px auto; /* 居中显示 */
transition: background-color 0.3s;
}
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: #4caf50; /* 绿色背景 */
}
input:checked + label:before {
left: calc(100% - 1px);
transform: translateX(-100%);
}
/* 媒体查询：当屏幕宽度大于等于768px时，调整布局 */
@media screen and (min-width: 768px) {
.container {
flex-direction: row; /* 在大屏幕上默认水平排列 */
}
/* 文本框行容器在大屏幕上默认仍为flex，但调整边距 */
.textbox-row {
display: flex; /* 保持flex布局 */
margin-bottom: 0; /* 移除垂直模式下的行间距 */
}
/* 文本框在大屏幕上的边距调整 */
.textbox-row input[type="text"] {
margin: 0 5px 0 0; /* 右侧和底部有边距 */
}
/* 最后一个文本框的右边距 */
.textbox-row input[type="text"]:last-child {
margin-right: 0;
}
}CSS解释：
- .container：设置为display: flex并默认flex-direction: column，实现主区域的垂直堆叠。在媒体查询中，当屏幕宽度达到768px时，将其flex-direction改为row，实现水平排列。
- .top：同样设置为display: flex，但flex-wrap: wrap允许其内部的textbox-row元素换行。
- .textbox-row：这是关键。默认设置为display: flex，这样其内部的文本框会水平排列。flex-wrap: wrap确保如果一行放不下，文本框会自动换到下一行。justify-content: center使文本框在行内居中对齐。
- input[type="text"]：设置了基本的样式和间距。
- 媒体查询：针对大屏幕设备，.container默认变为row布局。.textbox-row保持display: flex，但文本框的margin被调整，以适应水平布局下的紧凑排列。
JavaScript逻辑实现
JavaScript负责监听切换开关的点击事件，并根据当前布局状态动态修改CSS属性。
function toggleDivs() {
var container = document.querySelector(".container");
var topDiv = document.querySelector(".top");
var bottomDiv = document.querySelector(".bottom");
var textboxRows = document.querySelectorAll(".textbox-row"); // 获取所有textbox-row元素
// 检查当前主容器的flex-direction
if (container.style.flexDirection === "column" || container.style.flexDirection === "") {
// 如果当前是垂直布局（或未设置，默认为垂直），则切换到水平布局
container.style.flexDirection = "row";
topDiv.style.flex = "3";
bottomDiv.style.flex = "7";
topDiv.style.height = "auto";
bottomDiv.style.height = "auto";
// 将文本框行设置为flex，使其水平排列
textboxRows.forEach((row) => {
row.style.display = "flex";
row.style.flexWrap = "wrap"; // 确保文本框在行内可以换行
row.style.justifyContent = "center"; // 文本框在行内居中
row.style.marginBottom = "0"; // 移除垂直模式下的行间距
});
// 调整文本框在大屏幕上的边距
document.querySelectorAll(".textbox-row input[type='text']").forEach((input) => {
input.style.margin = "0 5px 0 0";
});
// 针对每个textbox-row的最后一个input，移除右边距
textboxRows.forEach(row => {
const inputs = row.querySelectorAll("input[type='text']");
if (inputs.length > 0) {
inputs[inputs.length - 1].style.marginRight = "0";
}
});
} else {
// 如果当前是水平布局，则切换到垂直布局
container.style.flexDirection = "column";
topDiv.style.flex = "3";
bottomDiv.style.flex = "7";
topDiv.style.height = "100%"; // 垂直布局时，top和bottom占据100%高度
bottomDiv.style.height = "100%";
// 将文本框行设置为block，使其垂直堆叠
textboxRows.forEach((row) => {
row.style.display = "block";
row.style.flexWrap = "nowrap"; // 垂直模式下不需要换行
row.style.justifyContent = "flex-start"; // 垂直模式下左对齐
row.style.marginBottom = "10px"; // 添加垂直模式下的行间距
});
// 调整文本框在垂直布局下的边距
document.querySelectorAll(".textbox-row input[type='text']").forEach((input) => {
input.style.margin = "5px"; // 恢复默认边距
});
}
}JavaScript解释：
- toggleDivs() 函数：当切换开关被点击时触发。
- 获取元素：首先获取container、top、bottom以及所有textbox-row元素。
- 判断布局方向：通过检查container.style.flexDirection来判断当前是垂直布局还是水平布局。
-
切换到水平布局（row）：
- 将container的flexDirection设置为row。
- 遍历所有的textbox-row，将其display设置为flex，flexWrap设置为wrap，justifyContent设置为center，以实现内部文本框的水平排列和换行。
- 调整文本框的margin以适应水平布局。
-
切换到垂直布局（column）：
- 将container的flexDirection设置为column。
- 遍历所有的textbox-row，将其display设置为block，这样它们会垂直堆叠，其内部的文本框也会因为父元素是block而垂直堆叠。
- 调整文本框的margin以适应垂直布局。
-
切换到水平布局（row）：
注意事项与总结
- CSS与JS的协作： 本方案巧妙地结合了CSS（用于定义基础布局和响应式规则）和JavaScript（用于动态切换布局类或属性）。在JavaScript中直接操作style属性虽然有效，但在更复杂的场景中，通过添加/移除CSS类来控制样式会是更佳实践，因为它能更好地分离结构和表现。例如，可以定义.horizontal-layout和.vertical-layout类，然后JS只切换这些类。
- Flexbox的强大： Flexbox是实现此类动态和响应式布局的理想工具。理解flex-direction、flex-wrap、justify-content和align-items是掌握其关键。
- HTML结构的重要性： 引入textbox-row这样的中间层div是实现精细控制的关键。它允许我们对文本框进行逻辑分组，并为这些组应用不同的布局规则。
- 响应式设计： 通过媒体查询，我们可以为不同屏幕尺寸提供不同的默认布局，并在用户切换时保持预期的行为。
- 用户体验： 确保切换过程平滑，例如添加CSS transition属性可以使布局变化更加自然。
通过以上步骤，我们成功构建了一个能够动态切换主容器布局方向，并智能调整内部文本框排列方式的交互式界面。这种方法不仅功能强大，而且易于理解和维护，为开发更灵活的用户界面提供了有力的支持。
