Flexbox 不换行和子百分比宽度不工作

Question

我正在尝试使用 flexbox 制作一个 2 行 3 列的网格。

因此，在我的布局中，我将父 div 设置为 display:flex 并设置 flex-wrap:wrap 以获取第二行。

然后我决定将孩子的宽度设置为 30%（期望每个孩子会得到 30% 的父母。在这种情况下，我的盒子应该出现每行 3 个元素。

但是现在可以了！

这是我的代码：

小提琴：https://jsfiddle.net/q39zj6j2/13/

还有 CSS：

#destaquesHome {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap:wrap;
margin:0px 0 0 0px;
}

.destaquesHome-item {
width: 32%;
display: table;
margin:10px 0 0 0px;
height:100px;    
border:1px solid #C8C8C8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; 
}

Answer 1

实际上你继承了a元素width而不是#destaquesHome，.destaquesHome-item在a元素内，这就是为什么它占用a元素的32%的宽度。尝试以下方式：

#destaquesHome > a {
  min-width:32%;
  display: block;
}

.destaquesHome-item {
  width: 100%;
  display: table;
  margin:10px 0 0 0px;
  height:100px;    
  border:1px solid #C8C8C8;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;   
}