CSS Flex列包装不起作用

问题描述：

我无法将div换成列。这里是我的代码CSS Flex列包装不起作用

.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

什么，我做错了什么？我找不到需要额外包装的东西。

如果删除'弯曲方向：从你的身体的CSS column'那么你的包裹栏就好。 –

但现在它是'行'方向 – Roman

你必须给你的'.body'元素一个特定的高度。这里是一个'height：60vh;'的例子：http://codepen.io/anon/pen/OVWRxx –

答

你需要的高度设置为包含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是一个有点不同，但它只是给你一个想法

是的，它有帮助=）谢谢=） – Roman

太糟糕了codepen链接被破坏 – ZimSystem

答

flex-direction: column表示子元素将从上到下对齐，每个元素将占据一行，因为默认值为flex-direction: row，所以可以将其删除，这意味着每个子元素将显示在一行中，如果宽度的柔性容器足够

CSS Flex列包装不起作用

相关推荐