我需要一个卡片列表布局，为此我使用 Flex。在大型设备中一切正常但是当设备变小并且两张牌不能相邻并且转到下一行，我的内容这不是中心
换句话说，我需要center我的内容在所有设备尺寸以及两张卡放在一起时应该是和中心之间的空间
.container-card {
background-color: grey;
direction: rtl;
}
.container-holder {
background-color: gold;
width: calc(100% - 28px);
max-width: 1004px;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
margin: 15px 2px;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
请检查上面的整页示例并更改响应大小
希望这对居中对齐的大家有所帮助，并且我不会在小屏幕上使用任何媒体查询相同的代码。
.container-card {
background-color: grey;
}
.container-holder {
background-color: #ffd700;
width: calc(100% - 28px);
max-width: 1004px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 0 auto;
text-align: center;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
margin: 15px 2px;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
