Question

我正在尝试使用flexbox模仿WinJS分组列表视图。我正在接近（我认为），除了在调整大小时列重叠。

我希望这些项目留在群组中，让群组水平增长。

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

我缺少什么想法？

Answer 1

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

flex-shrink source

这个号码＆＃39;组件设置flex-shrink longhand并指定flex缩减系数，该系数确定当分配负可用空间时，flex项目相对于flex容器中其余flex项目的收缩程度。省略时，将其设置为1.当分配负空间时，弹性收缩因子乘以弹性基础。

我不确定您尝试模仿的winJS行为，因为我从未使用过winJS，但我认为这更接近您希望实现的正确行为：{{3} }

Answer 2

列重叠，因为内容不适合。项目不适合该组，因此它们会流过。要解决这个问题，你必须为group-div指定一个溢出策略，其中“溢出”就像这样（最后一个）：

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

    display: flex;
    flex-flow: column wrap; 
    max-height: 600px; 

    overflow: hidden;
}

默认值为visible，这会使它们落在外面。在此处阅读更多内容：http://www.w3schools.com/cssref/pr_pos_overflow.asp

除hidden之外还有其他选项。您可以设置垂直/水平滚动，或两者都设置。只需选择让您更接近所需“WinJS分组列表视图”的内容。尝试：

overflow-x: scroll;
overflow-y: auto;

或

overflow-y: auto;
overflow-x: scroll;

快乐的编码！

Answer 3

“让组水平增长” - 你必须在.group上使用flex-direction作为“row”，你必须将组包装在#content中，然后它将不再重叠..

http://jsfiddle.net/gafcvq9b/2/

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    display: flex;
    flex-flow: row wrap; 
    max-height: 600px;    
}

Answer 4

我认为最好不要设置宽度，因为您希望flexbox动态确定它。所以我删除了它然后我添加了flex增长以增加第一组。

http://jsfiddle.net/mspriyakk/vv3tfrtv/3/

#content > .group:nth-of-type(1) {
    flex-grow: 2;   
}
#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
}

Answer 5

这是修正重叠列的正确答案：

.flex-container {
   display: flex;
   flex-flow: column;
}

.flex-item {
   flex: 1 0 auto;
}

Answer 6

可能会晚一点，但是我制作了一个Codepen，我在其中处理此问题，也许它将对阅读此问题的人们有所帮助。

html

<body>
  <div class="test-container">
    <div class="item item1">
      item1
    </div>
    <div class="item item2">
      item2
    </div>
    <div class="item item3">
      item3
    </div>
  </div>
</body>

css（scss）

.test-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 50%;
  background-color: red;
  padding-left: 2rem;

  .item {
    opacity: 0.6;
    height: 100px;
    width: 100px;
    flex-basis: 100px;
    margin-left: -2rem;
  }

  .item1 {
    background-color: cyan;
    z-index: 10;
  }

  .item2 {
    background-color: blue;
    color: red;
    z-index: 20;
  }

  .item3 {
    background-color: black;
    z-index: 30;
    color: white;
  }
}

https://codepen.io/Garma/pen/ZZmNWg?editors=1100

欢呼

Answer 7

我遇到了类似的问题，在我的情况下，解决方法是删除容器样式上的高度设置。这使容器的大小随着浏览器高度的变化而增加。

Flexbox列重叠

7 个答案: