Question

我无法将div包装成列。这是我的代码

.hosts.body
    display: flex
    flex-direction: column
    flex-wrap: wrap
    justify-content: flex-start
    align-content: flex-start
    align-items: flex-start

    .server
      border-left: 0.3em solid $green
      padding: 0.3em
      color: $green
      margin: 0.1em
      background: #c8e6c9
      min-width: 12em
      max-width: 12em
      overflow: hidden

链接：http://codepen.io/CJRoman/pen/YXNGGq

我做错了什么？我无法另外找出它需要包装的东西。

Answer 1

您需要将高度设置为包含flexbox元素

尝试像这样修改：

  .body
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-start
align-content: flex-start
align-items: flex-start
height: 500px

这个 fiddle 有点不同但只是为了给你一个想法

Answer 2

flex-direction: column表示子元素将从上到下对齐，每个元素将占用一行，您可以删除它，因为默认值为flex-direction: row，这意味着每个子元素都将如果flex-container的宽度足够大，则在一行中显示

CSS Flex列包装不起作用

2 个答案: