时间戳

首页 > 解决方案 > 空间不足/窗口调整大小时将元素换行？

html - 空间不足/窗口调整大小时将元素换行？

问题描述

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

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


   div div div div div div 


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

使用 display flex 将它们隔开。

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

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

}

请问有人可以告诉我我哪里出错了吗？提前致谢。

标签： htmlcssflexbox

解决方案

实际上，我设法在不使用媒体查询的情况下完成了我需要做的事情。通过利用 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;

}

推荐阅读