Question

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

Answer 1

这是可能的。 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')
}

计算左边的位置（红色）+它的宽度
找到正确位置（蓝色）
(blue.position) - (red) + (red.width)

Answer 2

Pure JavaScript Fiddle。

我在纯JavaScript中创建了与Mihailo相同的功能。以为有人可能觉得它很有用。请注意，我是一个相对较新的JavaScript，因此它可能没有得到很好的优化。

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

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

2 个答案: