CSS网格布局可用于实现编辑器窗格的调整(例如，如Codepen中)

Question

我想在不使用CSS网格布局的情况下实现无需JS的可分解窗格。这可能吗？

例如Codepen的编辑器为其HTML/CSS/JS编辑器提供了可重大的窗格。另外，请参见下面将其实现在平原JS中的示例(我似乎无法在其中的Codepen示例中添加URL，因此很难添加属性。代码是由http://codepen.io/添加的。gsound/) .

let isResizing = false;
let $handler = document.getElementById('handler');
let $wrapper = document.getElementById('wrapper');
let $left = document.getElementById('left');
$handler.addEventListener('mousedown', function(e){
  isResizing = true;
});
document.addEventListener('mousemove', function(e){
  if( !isResizing ) return;
  let newWidth = e.clientX - $wrapper.offsetLeft;
  $left.style.width = newWidth + 'px';
});
document.addEventListener('mouseup', function(){
  isResizing = false;
});

html,body{
  height: 100%;
  width: 100%;
  margin: 0;
}
#app{
  height: 100%;
/*   max-width: 1400px; */
  margin: 0 auto;
}
header{
  background-color: #AAA;
  height: 50px;
}
#wrapper{
  margin: 0 auto;
  height: calc(100% - 50px);
  width: 100%;
  background-color: #EEE;
  display: flex;
}
#handler{
  background-color: red;
  width: 5px;
  cursor: col-resize;
}
#left{
  width: 200px;
}
#content{
  width: 100%;
  flex: 1;
}
/* ----------- */
#left{
  background-color: yellow;
}
#content{
  background-color: #232378;
}

<div id="app">
  <header>head</header>
  <div id="wrapper">
    <aside id="left"></aside>
    <div id="handler"></div>
    <article id="content"></article>
  </div>
</div>

p.s作为旁注，我重新实现了例如以上添加和删除'mousemove'，'mouseup'事件，并且想知道这比使用布尔 isResizing并保持事件听众始终在那里...

Answer 1

网格布局模块是纯CSS。

可重大的窗格通常需要JavaScript才能发挥作用。

知道CSS主要是为样式和演示设计的，在网格布局规格中很可能没有内置的属性或方法，可以为手动解析的窗格提供。