Css Flexbox产品网格不工作

我有一个带引导的产品网格，我为产品添加了flexbox样式。项目框具有相同的高度

您可以在此处检查网格：

我为父元素添加基本flexbox样式。产品列表：

.product-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;

  -webkit-justify-content: space-between;
  justify-content: space-between;
}

然后我添加了子元素的样式：

.product-list .item {
    padding: 0 10px 10px 0px;
    margin-left: 0;
    float: left;
    text-align: center;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

---

为什么这样做不好？

您缺少类

.container

和

.row

（它们是引导网格的一部分），而且您需要将

flex:0 0 auto

更改为

flex:1

。产品列表{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
柔性流：行换行；
-webkit证明内容：之间的空间；
证明内容：之间的空间；
}
.产品清单.项目{
填充：0 10px 10px 0px；
左边距：0；
浮动：左；
文本对齐：居中；
-webkit-flex:1；
弹性：1；
}
.产品列表.色样{
宽度：16px；
高度：16px；
边框：1px实心；
边框颜色：#d8d9db；
显示：内联块；
垂直对齐：中间对齐；
-webkit边框右上角半径：50%；
边界右上角半径：50%；
-webkit边框右下半径：0；
边框右下半径：0；
-webkit边框左下半径：0；
边框左下半径：0；
-webkit边框左上半径：0；
边框左上半径：0；
-webkit边界半径：50%；
边界半径：50%；
背景剪辑：填充框；
-webkit盒阴影：0 3px 8px-5px黑色插图，-3px-1px 8px-4px白色插图；
盒影：0 3px 8px-5px黑色镶嵌，-3px-1px 8px-4px白色镶嵌；
}
.产品清单h3{
字体大小：14px；
边际：0px；
文本转换：大写；
边缘顶部：2倍；
}
.项目内部{
位置：相对位置；
填充：0 18px；
边框：1px实心#e0；
背景色：#fff；
/*最小高度：300px*/
}
.产品img{
填充顶部：10px；
文本对齐：居中；
/*最小宽度：210px；
高度：220px*/
溢出：隐藏；
/*宽度：170px*/
}
.产品信息{
位置：相对位置；
/*高度：73px*/
填充顶部：20px；
}
.产品信息span.extra-info{
显示：块；
颜色：#455A64；
字体大小：12px；
}
.产品img img{
显示：内联块；
垂直对齐：中间对齐；
/*最大宽度：210px；
最大高度：210像素*/
}
.产品清单.项目.价格{
颜色：#37474F；
字号：700；
字号：18px；
右边距：10px；
}
.产品列表.项目.产品id{
颜色：#455A64；
}
.产品列表.项目内部：悬停{
盒影：0 3px 6px 0 rgba（51,51,51,2）；
}
.产品列表。项目a：悬停{
颜色：#651ff；
}

---

你为什么投反对票？