html - CSS Flex 列换行不起作用

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 有点不同，但只是给你一个想法