css - Flexbox 不换行且子百分比宽度不起作用

Question

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

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

然后我决定将子项的宽度设置为 30%(预计每个子项将获得父项的 30%。在这种情况下，我的框应该每行显示 3 个元素。

但这现在可以工作了!

这是我的代码:

fiddle :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 inside 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;   
}