如何在 javascript 中獲取 flexbox 和網格布局的行數和列數？

Question

像這樣的 flexbox：

display: flex;
flex-flow: row wrap;

和網格是這樣的：

display: grid;
grid-template-columns: repeat(auto-fill, 20px);

動態排列項目，行數和列數不固定。

我不確定這是一兩個問題，因為 flexbox 和 grid 可能有不同的解決方案。 現在我無論如何都會問。

如何獲得行數和列數？ 並通過行索引和列索引進一步獲取項目？

以https://jsfiddle.net/w2L8oumw/16/為例。 拖動邊框使結果窗口的寬度發生變化，從而使行數和列數也發生變化。

我的想法是迭代所有項目並根據它們的位置、初始化、項目更改和調整大小來確定它們的行索引和列索引。

Answer 1

問題有點舊，但以防萬一有人需要這個：

如果您正在使用 CSS-Grid，則不需要太多計算。 您可以獲得當前的模板設置，例如

getComputedStyle(container).getPropertyValue("grid-template-rows")

在現代瀏覽器中，這會返回實際值，而不是來自 css 的值，因此您會得到一個字符串

250px 250px 250px

您可以通過拆分字符串並計算結果數組中的元素來計算當前的行數。

這可能也適用於較舊的 IE，我沒有對其進行測試。

Answer 2

下面為flexbox提供了一種用於計算列的示例解決方案，對於row和grid您必須對行進行類似的計算。

您可能需要添加或刪除一些計算。

 var getComputedValue = function (container, cssProp) { return parseInt(window.getComputedStyle(container, null).getPropertyValue(cssProp).split('px')[0]); }; var calcColms = function() { var container = document.getElementById("flexbox"); var parentWidth = getComputedValue(container,"width"); var parentPaddingLeft = getComputedValue(container,"padding-left"); var parentPaddingRight = getComputedValue(container,"padding-Right"); var child = container.firstElementChild; var childWidth = getComputedValue(child,"width"); var childMarginLeft = getComputedValue(child,"margin-left"); var childMarginRight = getComputedValue(child,"margin-right"); var parentWidthNoPadding = parentWidth - parentPaddingLeft - parentPaddingRight; var childWidthWithMargin = childWidth + childMarginLeft + childMarginRight; parentWidthNoPadding = parentWidthNoPadding + childMarginLeft + childMarginRight; var noCols = parseInt(parentWidthNoPadding / childWidthWithMargin); console.log(noCols); } window.onload = function () { calcColms(); }; window.onresize = function () { calcColms(); };

 #flexbox{ display:flex; flex-flow: row wrap; height:30vh; width:30vw; background:black; padding:5px; margin:5px; } #flexbox > div{ height:40px; width:40px; background:purple; margin:5px; } #grid{ display:grid; grid-template-columns: repeat(auto-fill, 40px); grid-gap: 10px; height:30vh; width:30vw; background:black; padding:5px; margin:5px; } #grid > div{ height:40px; /*width:40px;*/ background:purple; }

 <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

Answer 3

我們需要計算和查找，請在下面的函數function setrIdcId(containerId) 。 現在我正在調用按鈕單擊。 您可以在需要時致電。 （在滾動或調整大小）。 小提琴更新

 var GetItemOfContainer = function (container, rIdx, cIdx) { // solution code here } function setrIdcId(containerId){ _el = document.getElementById(containerId); _boxes = _el.children; var colCnt = Math.floor((_el.offsetWidth)/50); //Number of Column; 50:box width var rowCnt = Math.ceil(_boxes.length/colCnt); //Number of Rows for(var i = 0; i < _boxes.length; i++) { var cIdx = Math.floor(i / colCnt); // X var rIdx = Math.floor(i % colCnt); // Y _boxes[i].innerHTML = cIdx +":"+ rIdx; // Print // } }

 #flexbox{ display:flex; flex-flow: row wrap; height:30vh; width:30vw; background:black; padding:5px; margin:5px; } #flexbox > div{ height:40px; width:40px; background:purple; margin:5px; } #grid{ display:grid; grid-template-columns: repeat(auto-fill, 40px); grid-gap: 10px; height:30vh; width:30vw; background:black; padding:5px; margin:5px; } #grid > div{ height:40px; /*width:40px;*/ background:purple; }

 <div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <button onClick="setrIdcId('grid')" type="button">Call </button>