Question

我在flexbox容器中有3个div div，每个div div包含至少1个视图。我为row1的高度和蓝色的row2添加了一个resize句柄。它正确地调整了row1的高度，但最终弄乱了我不想要的row3的高度。 为什么它会影响row3的高度？如何防止这种情况？ 谢谢你的帮助。

Here's a codepen.

HTML

<div id="views-cntnr">
  <div id="r1" class="view-row">
    <div id="v1" class="view">
      <div class="v-header">
        <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
        <span class="v-title">R-Theta</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
    <div class="handle" id="r1-l-r">
    </div>
    <div id="v2" class="view">
      <div class="v-header">
        <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
        <span class="v-title">Cartesian</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
  </div>
  <div id="r1-r2-u-d" class="handle"></div>
  <div id="r2" class="view-row">
    <div id="v3" class="view">
      <div class="v-header">
        <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
        <span class="v-title">Longitudinal</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
  </div>
  <div id="r3" class="view-row">
    <div id="v4" class="view">
      <div class="v-header">
        <span class="v-title">Console</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
  </div>
</div>

JS

var mouseStartPosition = {};
var v1StartWidth, v2StartWidth, r1StartHeight, r2StartHeight;

var r1 = document.getElementById('r1');
var r2 = document.getElementById('r2');
var v1 = document.getElementById('v1');
var v2 = document.getElementById('v2');
var r1_lr_handle = document.getElementById('r1-l-r');
var r1_r2_ud = document.getElementById('r1-r2-u-d');

r1_lr_handle.addEventListener("mousedown", mousedownR1LR);
r1_r2_ud.addEventListener("mousedown", mousedownR1R2UD);

/* V1 V2 WIDTH RESIZE */
function mousedownR1LR
(e) {
  // get v1 width
  v1StartWidth = v1.offsetWidth;
  v2StartWidth = v2.offsetWidth;
  // get mouse position
  mouseStartPosition.x = e.pageX;
  mouseStartPosition.y = e.pageY;

  // add listeners for mousemove, mouseup
  window.addEventListener("mousemove", mousemoveR1LR);
  window.addEventListener("mouseup", mouseupR1LR);
}

function mousemoveR1LR(e) {
  // console.log('mouse move... x:', e.pageX, 'y:', e.pageY);
  var diff = mouseStartPosition.x - e.pageX;
    v1.style.flexBasis = v1StartWidth + -1*diff + 'px';
    v2.style.flexBasis = v2StartWidth + diff + 'px';
}

function mouseupR1LR(e) {
  window.removeEventListener("mousemove", mousemoveR1LR);
  window.removeEventListener("mouseup", mouseupR1LR);
}

/* v1 v2 width resize */

/* R1 R2 HEIGHT RESIZE */
function mousedownR1R2UD
(e) {
  // get R1 R2 height
  r1StartHeight = r1.offsetHeight;
  r2StartHeight = r2.offsetHeight;

  // get mouse position
  mouseStartPosition.x = e.pageX;
  mouseStartPosition.y = e.pageY;

  // add listeners for mousemove, mouseup
  window.addEventListener("mousemove", mousemoveR1R2UD);
  window.addEventListener("mouseup", mouseupR1R2UD);
}

function mousemoveR1R2UD(e) {
  // console.log('mouse move... x:', e.pageX, 'y:', e.pageY);
  var diff = mouseStartPosition.y - e.pageY;
    r1.style.flexBasis = r1StartHeight + -1*diff + 'px';
    r2.style.flexBasis = r2StartHeight + diff + 'px';
}

function mouseupR1R2UD(e) {
  window.removeEventListener("mousemove", mousemoveR1R2UD);
  window.removeEventListener("mouseup", mouseupR1R2UD);
}

/* v1 v2 width resize */

CSS

html,
body {
  height: 100%;
}

/* VIEWS */



/* VIEW HEADERS */

.v-header {
  position: relative;
  padding: 3px;
  border-bottom: #bfbfbf 1px solid;
  background-color: #1a1b1c;
  color: #ccc;
  font-weight: 900;
  font-size: 16px;
}

.v-title {
  position: relative;
  left: 35px;
}

#v4 .v-title {
  left: 6px;
}


/*VIEW BTNS */

.vh-btn {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  background-color: #343436;
  color: white;
  border: black 1px solid;
  position: absolute;
  top: 4px;
}

.vh-btn:hover {
  background-color: #4d4d50;
}

.v-settings {
  left: 6px;
}

.v-close {
  right: 5px;
}


/* view btns */


/* view headers */

#views-cntnr {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* HANDLES */
.handle {
}

#r1-l-r {
  background-color: DodgerBlue;
  width: 6px;
  cursor: col-resize;
}

#r1-r2-u-d {
  background-color: DodgerBlue;
  height: 6px;
  cursor: row-resize;
}

/* handles */

/* ROWS */


/* ROW 1 */

#r1 {
  display: flex;
  flex-grow: 4;
}

#r1 .view {
  flex-grow: 1;
  border: #bfbfbf 1px solid;
  border-top: none;
  border-right: none;
}

#r1 .view:last-child {
  border-left: none;
}


/* row 1 */


/* ROW 2 */

#r2 .view {
  border: #bfbfbf 1px solid;
  border-top: none;
  flex-grow: 1;
}

#r2 {
  display: flex;
  flex-grow: 3;
}


/* row 2 */


/* ROW 3 */

#r3 .view {
  border: #bfbfbf 1px solid;
  border-top: none;
  flex-grow: 1;
}

#r3 {
  display: flex;
  flex-grow: 2;
}


/* row 3 */


/* rows */


/* views */

Answer 1

因为在开始时，没有一行具有弹性基础（因此它们为0）。

使用基本的flex grox（每个1个），它们将增长到33％。

当你为r1和r2设置flex-basis为150px时，你有：

r1：基础150px +成长
r2：基础150px +成长
r3：基础0 +成长

所以r3崩溃需要(100% - 300px) / 3而不是33％。

基本上，问题在于柔性增长/柔性收缩的混合，这是为自动尺寸计算和固定尺寸而制作的。你应该做一切固定尺寸

使用vanilla JavaScript的flexbox行高的可调整大小的函数会导致下面的行中的视图更改大小

HTML

JS

CSS

1 个答案: