使用JavaScript獲取Flexbox元素之間的空間

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

1. 計算左一個（紅色）的位置+它的寬度

2. 找到正確的位置（藍色）

3. (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'; 
}