Question

我正在尝试使用flexbox创建一个包含2行和3列的网格。

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

然后我决定将孩子的宽度设置为30％（期望每个孩子能得到30％的父母。在这种情况下，我的盒子应该每行显示3个itens。

但这现在正在发挥作用！

这是我的代码：

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，a，这就是为什么它占据了32％的宽度a元素。尝试以下方式：

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

Flexbox没有包装和子百分比宽度不起作用

1 个答案: