Tôi làm cách nào để hiển thị ba cột trên mỗi hàng?

Question

Tôi đã cố gắng hiển thị ba cột mỗi hàng. Có thể sử dụng flexbox không?

CSS hiện tại của tôi là một cái gì đó như thế này:

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

Mã này đặt tất cả nội dung trong một hàng duy nhất. Tôi muốn thêm một ràng buộc để chỉ hiển thị ba bản ghi mỗi hàng.

Answer 1

Đây có thể là những gì bạn đang tìm kiếm:

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

Tìm thấy giải pháp: Thêm thuộc tính flex-flow: row wrap; sẽ giải quyết vấn đề.

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