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

什麼，我做錯了什麼？我找不到需要額外包裝的東西。

來源

2015-05-29 Roman

如果刪除'彎曲方向：從你的身體的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是一個有點不同，但它只是給你一個想法

來源

2015-05-29 08:17:37 maioman

是的，它有幫助=）謝謝=） – Roman

太糟糕了codepen鏈接被破壞 – ZimSystem

flex-direction: column表示子元素將從上到下對齊，每個元素將佔據一行，因爲默認值爲flex-direction: row，所以可以將其刪除，這意味着每個子元素將顯示在一行中，如果寬度的柔性容器足夠

來源

2015-05-29 07:26:31

CSS Flex列包裝不起作用

回答

相關問題