我正在尝试在Windows 8商店应用中创建一个水平灵活的屏幕,其中几个组水平伸展(包含在外部Flexbox中),以及垂直列出的组下的各个字段,从屏幕底部包裹到必要时顶部(包含在一系列内部Flexbox中)。这是与分组的Windows 8 ListView类似的布局,但由于我显示与单个数据项相关的字段,并且某些部分将在页面的其他位置包含ListView,因此我无法使用listview来显示数据。
每当内部Flexbox部分换行到新列时,我就遇到了问题:在包装Flexbox之后放置的Flexbox出现一个列宽,而不是前一部分的列宽。这在以下屏幕截图中说明:
不是我的想法!我希望看起来如下所示(通过手动设置溢出部分的边距来创建。)
此页面的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;
}
有没有办法在第二张照片中实现我的目标,我有灵活盒设置?如果没有,是否有另一种方法可以让页面上的内容尽可能地水平运行?我希望应用程序像网格视图一样流畅灵活,但是我提到过,我不可能使用它。
答案 0 :(得分:1)
这是我最终使用的最终方法:
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";
}
我相信这应该适用于大多数情况,但我没有真正测试过它,除了我的。再一次,如果有人有更好的解决方案,那将会很有趣!
答案 1 :(得分:0)
我的问题是我得到了一个高度和一个缩小的内容框。
我的解决方案:
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';
}
}