Windows 8 Flexboxes - 啓用溢出嵌套Flexboxes

我試圖在Windows 8商店應用程序中創建水平柔性屏幕，其中有幾組水平伸展（包含在外部Flexbox中）和垂直列出的組下的各種字段，必要時將屏幕底部包裹到頂部（包含在一系列內置Flexbox中）。這是與分組的Windows 8 ListView類似的佈局，但由於我顯示的是與單個數據項相關的字段，並且某些部分將在頁面中的其他位置包含ListView，因此我無法使用列表視圖來顯示數據。Windows 8 Flexboxes - 啓用溢出嵌套Flexboxes

每當內部Flexbox部分換行到新列時，我都會遇到問題：放置Flexbox後的Flexbox顯示的是一列寬度，而不是前一部分的列寬。這是在下面的截圖所示：

Not how I want flexboxes to look

不太什麼，我腦子裏想的！（通過手動設置與溢出的部分邊緣創建），我想會是什麼樣子如下所示

Much improved flexboxes

該頁面的HTML如下：

<section aria-label="Main content" role="main">    

    <div class="main-container"> 

    <div id="n1" class="inner-container"> 
     <div class="element"></div> 
     .. And so on

並以此爲CSS：

.test section[role=main] {  
    overflow-x: scroll; 
    overflow-y: hidden; 
    -ms-overflow-style:-ms-autohiding-scrollbar; 
} 

.main-container { 
    display: -ms-flexbox; 
    /*We will put a slight margin at the bottom of the page to keep elements from appearing too low*/ 
    height: calc(100% - 60px); 
} 

.inner-container { 
    display: -ms-flexbox; 
    -ms-flex-direction: column; 
    -ms-flex-wrap: wrap; 
    margin-right: 50px; 
} 

.element { 
    border:solid; 
    width:150px; 
    height:150px; 
} 

#n1 .element { 
    background-color:red; 
} 

#n2 .element { 
    background-color:green; 
} 

#n3 .element { 
    background-color:blue; 
} 

#n4 .element { 
    background-color:goldenrod; 
}

有什麼辦法來實現什麼，我在第二張照片與FL瞄準前箱設置，我有？如果沒有，是否還有另一種方法可以讓頁面上的內容儘可能地水平運行？我希望應用程序像網格視圖一樣具有流動性和靈活性，但正如我所提到的那樣，我不可能使用它。

來源

2012-09-20 Paul O.

這是最後的方法，我最終使用：

var groups = document.querySelectorAll(".inner-container"); 

for (var i = 0; i < groups.length; i++) { 
    var group = groups[i]; 
    //The scroll width is the width of the actual content of our flex box. 
    //If we set the div's CSS width to the scroll width, the box will push other flex box elements correctly. 
    group.style.width = group.scrollWidth + "px"; 
}

我認爲，這在大多數情況下工作，但在任何但是我的我還沒有真正測試過。再一次，如果有人有更好的解決方案，看看會很有趣！

來源

2012-09-20 17:20:04

我的問題是，我得到了一個高度和一個內容框這是狹窄。

我的解決辦法：

var groups = element.querySelectorAll('.contentBox'); 
for (var i = 0; i < groups.length; i++) { 
    var group = groups[i]; 
    var tempwidth = 0; 
    while (group.childNodes[1].scrollHeight > group.scrollHeight) { 
     tempwidth = tempwidth + 100; 
     group.childNodes[1].style.width = tempwidth + 'px'; 
    } 
}

來源

2013-04-11 09:13:53 Freddy

Windows 8 Flexboxes - 啓用溢出嵌套Flexboxes

回答

相關問題