如何实现指定Flexbox双列布局？不可修改HTML可使用原生JS

能否实现目标Flexbox布局？我尝试过flex-flow: column wrap，但该方式需要固定高度，当前场景无法提供。除Flexbox外还有哪些实现思路？

限制条件：

• 仅可使用原生JavaScript，不能用任何库
• 无法修改原始HTML结构
• Item #3和#4需作为宽度可调的侧边栏

另外，我提出了一套通过JS重构DOM结合Flexbox的实现方案（代码如下），想请教该方案在项包含实际内容时是否存在明显问题？

现有实现代码 #

HTML #

<div id="parent">
  <div class="some-class">Item 1</div>
  <div class="some-other-class">item 2</div>
  <div class="sidebar">item 3</div>
  <div class="sidebar">item 4</div>
  <div class="no-class">item 5</div>
  <div class="else">item 6</div>
</div>

CSS #

#parent{
  display: flex;
}
#main{
  width: 70%;
}
#sidebar{
  width: 30%;
}

JavaScript（原方案） #

$(document).ready(function(){
  $('<div>', {
    id: 'main',
  }).appendTo('#parent');

  $('#parent').children().appendTo('#main');

  $('<div>', {
    id: 'sidebar',
  }).appendTo('#parent');
  
  $('#main .sidebar').appendTo('#sidebar');
});

方案分析与替代思路 #

原JS方案的问题与改进 #

原方案依赖jQuery，不符合「禁用库」的要求，且实际使用时需注意以下风险：

1. 事件丢失：如果原始项绑定了事件监听器，直接移动DOM会导致事件失效（除非采用事件委托）
2. 性能损耗：频繁DOM操作会触发重排重绘，若项内包含大量元素，可能影响页面流畅度
3. 样式异常：部分依赖父层级的CSS选择器，在DOM结构变更后可能失效

改用原生JS的实现版本：

document.addEventListener('DOMContentLoaded', function() {
  const parent = document.getElementById('parent');
  // 创建主内容容器
  const main = document.createElement('div');
  main.id = 'main';
  parent.appendChild(main);
  // 将父容器下所有子元素移入主容器
  while(parent.firstChild !== main) {
    main.appendChild(parent.firstChild);
  }
  // 创建侧边栏容器
  const sidebar = document.createElement('div');
  sidebar.id = 'sidebar';
  parent.appendChild(sidebar);
  // 迁移侧边栏项
  const sidebarItems = main.querySelectorAll('.sidebar');
  sidebarItems.forEach(item => sidebar.appendChild(item));
});

无需DOM重构的替代方案 #

CSS Grid布局（推荐）

纯CSS实现，无需修改DOM，灵活性高：

#parent {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 1rem; /* 可选，添加内容间距 */
}
/* 主内容项放在第一列 */
.some-class, .some-other-class, .no-class, .else {
  grid-column: 1 / 2;
}
/* 侧边栏项放在第二列，占满主内容区域的高度 */
.sidebar {
  grid-column: 2 / 3;
  grid-row: 1 / span 4;
}

优点：无DOM操作风险，布局逻辑清晰；缺点：不兼容IE11及以下浏览器。

CSS Float布局

兼容性好，但灵活性较差：

#parent {
  overflow: hidden; /* 清除浮动 */
}
.sidebar {
  float: right;
  width: 30%;
}
/* 主内容区域留出侧边栏宽度的间距 */
.some-class, .some-other-class, .no-class, .else {
  margin-right: 32%; /* 比侧边栏宽度多2%作为间距 */
}

内容的提问来源于stack exchange，提问作者DtyCFx