使用 JavaScript 获取 flexbox 元素之间的空间

Question

是否可以使用 JavaScript 在 flexbox 中获取使用justify-content: space-between两个元素之间的空间？

Answer 1

It's possible. Example

function calcSpaceBetween(){
  var red_pos = $('#d1').position().left + $('#d1').width();
  var blu_pos = $('#d2').position().left;

  var space = blu_pos - red_pos;

  $('#space').text(space + ' px')
}

1. Calculate the position of the left one (red) + it's width

2. Find the position of the right one (blue)

3. (blue.position) - (red) + (red.width)

Answer 2

Pure JavaScript Fiddle .

I made the same function as Mihailo in pure JavaScript. Thought someone might find it useful. Please note that I'm relatively new to JavaScript so it might not be very well optimized.

function calcSpaceBetweenJavascript(){
    var red_elem = document.getElementById('d1')
    var blue_elem = document.getElementById('d2')
    var space_elem = document.getElementById('space')

    var red_pos = red_elem.offsetLeft + red_elem.getBoundingClientRect().width;
    var blu_pos = document.getElementById('d2').offsetLeft;

    var space = blu_pos - red_pos;
    space_elem.textContent = space + ' px';
}