Flexbox兩列網格不能正常工作

Question

其非常簡單，我想要一個帶有flexbox的兩列網格，我閱讀了一些代碼示例like this但我的代碼不工作。

你可以在這裏查看Flex網格：https://jsfiddle.net/7ew9rjuq/3/

這是CSS：

.mini-product-detail { 
    display: -ms-flex; 
    display: -webkit-flex; 
    display: flex; 
} 
.mini-product-detail .mini-item { 
    border: 1px solid #e0e0e0; 
    background-color: #fff; 
    margin-bottom: 24px; 
    padding: 10px; 
    width:50%; 
} 

Answer 1

使用flex-wrap: wrap; ..

也用於box-sizing: border-box;的項目。

.mini-product-detail { 
 
display: -ms-flex; 
 
display: -webkit-flex; 
 
display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.mini-product-detail .mini-item { 
 
border: 1px solid #e0e0e0; 
 
background-color: #fff; 
 
margin-bottom: 24px; 
 
padding: 10px; 
 
width: 50%; 
 
box-sizing: border-box; 
 
}

<div class="mini-product-detail"> 
 
\t \t \t \t \t \t \t \t 
 
\t <div class="mini-item"></div> 
 
\t <div class="mini-item"></div> 
 
\t <div class="mini-item"></div> 
 
\t <div class="mini-item"></div>