如何顯示每行三列？

Question

我一直在試圖顯示每行三列。有沒有可能使用flexbox？

我現在的CSS是這樣的：

.mainDiv { 
    display: flex; 
    margin-left: 221px; 
    margin-top: 43px; 
} 

這個代碼將所有內容在一個單行。 我想添加一個約束來顯示每行三個記錄。

Answer 1

這可能是你在找什麼：

http://jsfiddle.net/L4L67/

body>div { 
 
    background: #aaa; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
body>div>div { 
 
    flex-grow: 1; 
 
    width: 33%; 
 
    height: 100px; 
 
} 
 

 
body>div>div:nth-child(even) { 
 
    background: #23a; 
 
} 
 

 
body>div>div:nth-child(odd) { 
 
    background: #49b; 
 
}

<div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Answer 2

找到了解決辦法：添加屬性flex-flow: row wrap;將解決問題。

.mainDiv { 
    display: flex; 
    margin-left: 221px; 
    margin-top: 43px; 
    width:100px; 
    flex-flow: row wrap; 
}