Question

我正在调整网页上flexbox元素的大小。

到目前为止，我仍然能够调整“终端”和“输出”框的大小，仍然需要完成左，右和内容的调整，但是我正在认真地重新考虑实现。

我的实现存在的问题是它不够通用，因此我将不得不为每个调整大小的句柄编写函数。这也意味着，如果我更改布局，则必须重做调整大小的处理。

看到这仍然是应用程序的初期，我只知道布局会改变。

有人知道更好的方法来处理flexbox的大小吗。

请注意，我没有使用jquery，并且我想继续使用纯JavaScript。

jsfiddle示例：jsfiddle

var resizer = document.getElementById('debug-resize');
var debugWrapper = document.getElementById('debug');
var terminal = document.getElementById('debug-terminal');
var output = document.getElementById('debug-output');
var isHandlerDragging = false;

document.addEventListener('mousedown', function(e) {
  if (e.target === resizer) {
    isHandlerDragging = true;
  }
});


document.addEventListener('mousemove', function(e) {
  if (!isHandlerDragging) {
    return false;
  }

  var OffsetLeft = debugWrapper.offsetLeft;
  var ponterRelX = e.clientX - OffsetLeft;

  terminal.style.width = (ponterRelX) + 'px';
  terminal.style.flexGrow = 0;
});

document.addEventListener('mouseup', function(e) {
  isHandlerDragging = false;
});

  * {
    box-sizing: border-box; 
  }
  body {
   display: flex;
  min-height: 100vh;
  flex-direction: column;
  }
  
  footer{
  	margin: 0;
    background-color:red;
  }
  header{
 	height:50px;
    background-color:yellow;
  }
  main{
    display: flex;
  	flex: 1;
    flex-direction: row;
    background-color:red;
  }
  
  #left-side{
  	background-color:orange;
    width:100px;
  }
  
  #right-side{
  	background-color:orange;
    width:100px;
  }
  
  #window{
  	height:30px;
    background-color:green;
    flex-direction: row;
    display: flex;
  }
  
  #content-wrapper{
    background-color:blue;
  	flex:1;
    flex-direction: column;
    display: flex;
  }
  
  #process-canvas-wrapper{
  	flex:1;
    background-color:blue;
  }
  
  #debug{
    display: flex;
    color:#fff;
  	min-height:100px;
    flex-direction: row;
  }
  
  #debug-output{
  	flex:1;
    color:#fff;
    background-color:grey;
    box-sizing: border-box;
    flex: 1 1 auto;
  }
  #debug-terminal{
  	flex:1;
    color:#fff;
    background-color:black;
    box-sizing: border-box;
    flex: 1 1 auto;
  }
  
  #icon{ width:20px;}
  #file-menu{flex:1}
  #toolbox{display:flex;width:150px;justify-content: flex-end;}
  
  #left-resize{
  	width:10px;
    background-color:#fff;
    cursor: ew-resize;
  }
  
  #right-resize{
  	width:10px;
    background-color:#fff;
    cursor: ew-resize;
  }
  
  #content-resize{
  	height:10px;
    background-color:#fff;
    cursor: ns-resize;
  }
  
  #debug-resize{
  	width:10px;
    background-color:#fff;
    cursor: ew-resize;
  }
  
  #resizeV{
  	height:10px;
    background-color:#fff
  }

<!doctype html>
<title>Example</title>
<body>
  <section id="window">
    <div id="icon">X</div>
    <div id="file-menu">file</div>
    <div id="toolbox">close</div>
  </section>
  <header>Header</header>
  <main>
    <aside id="left-side">left</aside>
    <div id="left-resize" class"panel-resize">.</div>
    <section id="content-wrapper">
      <section id="process-canvas-wrapper">content</section>
      <div id="content-resize" class"panel-resize">.</div>
      <section id="debug">
        <section id="debug-terminal">terminal</section>
        <div id="debug-resize" class"panel-resize">.</div>
        <section id="debug-output">output</section>
      </section>
    </section>
    <div id="right-resize" class"panel-resize">.</div>
    <aside id="right-side">right</aside>
  </main>
  <footer>Footer</footer>
</body>

Flexbox布局调整大小

0 个答案: