Question

我想在没有JS的情况下实现可调整大小的窗格，只使用CSS Grid layout。这可能吗？

例如CodePen的编辑器为其HTML / CSS / JS编辑器提供了可调整大小的窗格。另外，请参阅下面的示例，该示例在普通JS中实现它（我似乎无法在其中添加CodePen示例的URL，因此添加归因很难。代码是{{3 }}）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

作为旁注，我已经重新实施了例如。以上是添加和删除'mousemove'，'mouseup'事件，并想知道这是否更好＆＃34; （更高效）比使用布尔值isResizing并始终保持事件监听器...

Answer 1

网格布局模块是纯CSS。

可调整大小的窗格通常需要JavaScript才能运行。

知道CSS主要是为样式和表示而设计的，Grid Layout spec中很可能没有内置的属性或方法可用于手动调整大小的窗格。

可以使用CSS Grid布局来实现编辑器窗格的大小调整（例如在CodePen中）

1 个答案: