flexbox - Flexbox列重叠

61 0

我正在尝试使用flexbox模拟WinJS分组列表视图。 我正在接近(我认为)解决问题,除了在调整大小时列会重叠。

http://jsfiddle.net/w8ts4Lnx/5/

我希望item留在组内,让组水平增长。


body {


 height: 100%;


 display: flex;


 flex-flow: column wrap;


}



h1 {


 padding: 1em;


}



#content {


 padding: 10px;


 background-color: #eee;


 display: flex;


 flex-flow: row nowrap;


 flex-grow: 1;


}



#content>. group {


 margin: 10px;


 padding: 10px;


 border: 1px solid #cfcfcf;


 background-color: #ddd;


 display: flex;


 flex-flow: column wrap; 


 max-height: 600px; 


}



#content>. group. item {


 margin: 10px;


 padding: 10px;


 background-color: #aaa;


 width: 200px;


}



我的想法缺少了什么?

时间: 原作者:

135 2

如果你不希望内容溢出容器,则必须指定 flex-shrink: 0;

flex-shrink source

这里'number'组件设置 flex-shrink 伸缩, 并指定flex缩减系数, 该系数决定当分配负可用空间时flex项目, 相对于flex容器中其余flex项目的收缩程度 。 如果省略,则将它的设置为 1. 在分配负空间时,弹性收缩因子乘以弹性基础。

我不确定你试图模仿的winJS行为,因为我从未使用过winJS, 但我认为这更接近你想要达到的正确行为: http://jsfiddle.net/w8ts4Lnx/11/

114 3

列重叠,因为内容不匹配。 这些项不适合组,因此它们将通过。 为了解决这个问题,你必须为group-div指定一个溢出策略,使用“overflow ”这样(最后一个):


#content>. group {


 margin: 10px;


 padding: 10px;


 border: 1px solid #cfcfcf;


 background-color: #ddd;



 display: flex;


 flex-flow: column wrap; 


 max-height: 600px; 



 overflow: hidden;


}



默认是可见的,这使得它们落在外面。 详细阅读:http://www.w3schools.com/cssref/pr_pos_overflow.asp

除了 hidden 还有其它选项。 可以设置垂直/水平滚动,也可以同时设置。 只要选择任何让你接近所需"winjs分组列表视图"的东西。 尝试以下方法:


overflow-x: scroll;


overflow-y: auto;



或者


overflow-y: auto;


overflow-x: scroll;



开心编码!

原作者:
...