Flexbox两列网格不起作用

Question

非常简单，我想要一个带有flexbox的两列网格，我读了一些代码示例like this，但我的代码不起作用。

您可以在此处检查弹性网格：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;作为项目。

＆＃13;

＆＃13;

 .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;
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;