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;
}

我的想法缺少了什么?

时间:原作者:0个回答

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;

开心编码!

原作者:
...