Question

我的父div中有6个框，如下所示：

- - - - - Parent Div - - - - -


   div div div div div div 


- - - - - Parent Div - - - - -

它们正在使用display flex隔开。

但是，在调整窗口大小时，我希望它们折叠到3 x 3然后是2 x2。最后显示为：

- - - - - Parent Div - - - - -

           Div Div
           Div Div
           Div Div

这是我尝试过的方法，但似乎无法使其正常工作。我仍然将6排挤在一起。

CSS:
.premium_listing_container {
  width: 990px;
    height:auto;
    position: relative;
    text-align: center;
     display: flex; 
justify-content: space-between;
flex-wrap: wrap;

}

.premium_component {
width:145.5px;
padding:0.4em;
 vertical-align: top;   
border:1px solid #878787;
text-align:center;
position:relative;
cursor: pointer;
margin-bottom:20px;

}

请有人能告诉我我要去哪里错吗？预先感谢。

Answer 1

实际上，我在不使用媒体查询的情况下设法完成了我需要做的事情。通过使用inline-block显示属性。

我将暂缓接受我的答案，以允许其他人做出（更好）的答案-以防万一。

.premium_listing_container {
    position: relative;
    text-align: center;
 display: flex; 
justify-content: space-between;
flex-wrap: wrap;

}

.premium_component {
width:145.5px;
padding:0.4em;
 vertical-align: top;   
border:1px solid #878787;
text-align:center;
position:relative;
cursor: pointer;
margin-bottom:20px;
display: inline-block;

}

当空间不足/窗口调整大小时，将元素中断到新行上吗？

1 个答案: