4个响应div没有正确显示在选项卡和移动设备上

Question

我正在尝试为主页创建4个响应div；试图减少div的填充和余量不起作用。div应该在移动设备上做出响应，它们会在每个设备下面移动；选项卡上显示两个div；桌面上有4个div，移动设备上有一个div我尝试过以下HTML：

<div class="flex-container">
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn"><a href="#" role="button">Practice Now</a></button>
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn"><a href="#" role="button">Practice Now</a></button>
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn"><a href="#" role="button">Practice Now</a></button>
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="homepage-div homepage-div-shadow">
<img class="homepage-div-icon"/>
<h2>Heading</h2>
<h6>Sub-Heading</h6>
<p>This is responsive paragraph. Text would not move out of div as below .</p>
<button class="bttn"><a href="#" role="button">Practice Now</a></button>
</div>
</div>
</div>
</div>
here is css divs are not showing properly on tab and mobile devices and i want to decreae the padding and margin:

.homepage-div-shadow
{
padding: 20px;
box-shadow: 2px 2px 8px 1px #cccccc;
border: solid 1px #cccccc;
border-radius: 2px;
}
.homepage-div-icon{
background-image: url("image.png");
width: 100px;
height: 100px;
}
.homepage-div a
{
text-decoration: none;
color: white;
font-size: 16px;
}
.homepage-div h2{
font-size: 28px;
opacity: 0.90;
font-weight: 600;
margin: 5%;
margin-bottom: 6px;
}
.homepage-div h6{
font-size: 17px;
padding: 0px;
margin: 0px;
margin-bottom: 20px;
opacity: 0.6;
}
@media(min-width: 769px) {
.flex-container {
display: flex;
flex-wrap: wrap;
}

.flex-container .flex-item {
flex: 1 0 50%;
}
}
@media (min-width: 1024px) {
.flex-container .flex-item {
flex: 1 0 25%;
}
}
.flex-item-inner {
padding: 25px;
margin: 20px;
background-color: white;
}

这是演示链接：testfellow

Answer 1

希望下面的解决方案能有所帮助。我刚刚尝试模拟有一定数量的divs的场景。根据您的问题和要求，有：
1。遵循移动优先的方法
2.对于移动设备，每个div都应单独排列
3.对于选项卡(在断点：769px及以上(，两个div应该在一行中
4.对于台式机(在断点：1024px及以上(，四个div应该排成一行。

*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #2980b9;
}
.flex {
max-width: 80%;
}
.flex-item {
background-color: #ffffff;
padding: 5em;
border: 1px solid black;
margin: 2% auto;
width: 25%;
}
@media(min-width: 769px) {
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 50%;
}
}
@media(min-width: 1024px) {
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 25%;
}
}

<div class="flex">
<div class="flex-item"></div>
<div class="flex-item "></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item "></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>