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

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

<div class="container">
  <div class="top">
    <!-- 内部文本框将在这里 -->
  </div>
  <div class="bottom"></div>
</div>

.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;
}

function toggleDivs() {
  var container = document.querySelector(".container");
  var top = document.querySelector(".top");
  var bottom = document.querySelector(".bottom");

  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";
  } else {
    // 从水平切换到垂直
    container.style.flexDirection = "column";
    top.style.flex = "3";
    bottom.style.flex = "7";
    top.style.height = "100%";
    bottom.style.height = "100%";
  }
}

<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>

.textbox-row {
  display: flex; /* 默认让内部文本框水平排列 */
  flex-wrap: wrap; /* 允许文本框换行 */
}

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

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保持flex布局
    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变为block布局，实现垂直堆叠
    textboxRows.forEach((row) => {
      row.style.display = "block";
    });
  }
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top {
  flex: 3;
  background-color: blue;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.bottom {
  flex: 7;
  background-color: green;
  border: 1px solid black;
}

/* 文本框行容器 */
.textbox-row {
  display: flex; /* 默认水平排列 */
  flex-wrap: wrap;
}

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

/* 开关样式 - 隐藏原始checkbox */
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;
}

/* 开关滑块 */
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 默认也应为 flex，但这里为了与JS逻辑配合，可以根据实际需求调整 */
  /* 如果希望大屏幕下默认就是水平排列，且JS不干预，则可以调整JS的初始状态或CSS的优先级 */
  /* 在本例中，JS会动态设置display，所以这里的display: block; 可能会被JS覆盖 */
  .textbox-row {
    display: flex; /* 在大屏幕下，文本框行默认也是flex布局 */
  }

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

  input[type="text"] {
    margin-bottom: 0; /* 移除垂直间距 */
  }
}