Flexbox Rows That Maintain Original Height Ratio On Window Resize

My main goal with my project is to have resizable flexbox div views. I have working resizable columns for #v1 and #v2. I also have rows that can be resized, the handles are the blu

Solution 1:

I was able to accomplish the effect fairly simply - codepen here.

Make sure you assign a flex-basis to each row, altering it with javascript to accomplish the dragging effect. On window resize the elements will fit themselves to the container automatically, so you don't need to fuss with window on resize.

HTML:

<divclass="wrap"><divclass="row"id="row-1"><divclass="handle"></div><divclass="row-header"></div></div><divclass="row"id="row-2"><divclass="handle"></div><divclass="row-header"></div></div><divclass="row"id="row-3"><divclass="handle"></div><divclass="row-header"></div></div></div>

CSS:

body {
  padding: 0;
  margin: 0;
}
.wrap {
  display: flex;
  flex-direction: column;
  background: white;
  height: 100vh;
}
.row {
  flex-basis: 100px;
  border: 4px solid #333;
  border-top: none;
}
.handle {
  height: 15px;
  background: lightblue;
  cursor: move;
}

Javascript:

$(document).ready(function(){  
  $('.row').mousedown(function(event){
    // They have dragged a row// Adjust the flex-basis of the previous row// Since index is 0 based and the rows are 1 based, use the index with the row to select the previous onevar this_index = $(this).index()
    var selected_id = (this_index == 0) ? selected_id = '' : selected_id = '#row-' + this_index

    // Get starting flex-basis as intvar starting_basis = $(selected_id).css('flex-basis')
    starting_basis = starting_basis.substr(0, starting_basis.length - 2)
    starting_basis = Number(starting_basis)

    var start_y = event.pageY

    $(document).mousemove(function(event){
      // Change flex basis as mouse moves
      y_pos = event.pageY - start_y

      var new_flex_basis = starting_basis + y_pos
      new_flex_basis += 'px'

      $(selected_id).css('flex-basis', new_flex_basis)
    })
  })

  $(document).mouseup(function(){
    $(document).off('mousemove')
  })
})