如何使用 flexbox 均匀地显示内容卡,包括边距边 [重复]
Posted
技术标签:
【中文标题】如何使用 flexbox 均匀地显示内容卡,包括边距边 [重复]【英文标题】:How do I display content cards evenly spaced including margin sides using flexbox [duplicate] 【发布时间】:2020-09-10 03:17:13 【问题描述】:<section class="cards">
% for m in mcontent %
<div class="card">
<div class="top">
<div class="year">m.Year</div>
<div class="wish_icon"><a href="#" class="add_to_wishlist">wishicon</a></div>
</div>
<div class="middle">
<div class="img-container"><img src=" m.Image.url "></div>
</div>
<div class="bottom">
<div class="charge">m.charge</div>
<div class="list">m.list</div>
</div>
</div>
% endfor %
</section>
CSS
.cards
display: flex;
justify-content: space-around;
flex-wrap: wrap;
flex-direction: row;
.card
width: 250px;
height: 350;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-color: white;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 30px;
它的样子:[1]:https://i.stack.imgur.com/KWiLm.png
它应该是什么样子:[2]:https://i.stack.imgur.com/t2WuA.png
我希望卡片从左到右出现,彼此之间的距离相等,而且左右边距也一样,所以我可以用justify-content: flex-start;
解决这个问题,但这会给我留下不需要的右边空间一边,我有点迷路,感谢任何帮助,Thnx!
【问题讨论】:
【参考方案1】:.cards
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
.card
width: 250px;
height: 350;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: white;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 30px;
<section class="cards">
<div class="card">
<div class="top">
<div class="year">m.Year</div>
<div class="wish_icon">
<a href="#" class="add_to_wishlist">wishicon</a>
</div>
</div>
<div class="middle">
<div class="img-container"><img src=" m.Image.url " /></div>
</div>
<div class="bottom">
<div class="charge">m.charge</div>
<div class="list">m.list</div>
</div>
</div>
</section>
我想它会帮助你。
【讨论】:
恐怕不完全是【参考方案2】:你试过了吗
Justify-content: space-evenly;
【讨论】:
以上是关于如何使用 flexbox 均匀地显示内容卡,包括边距边 [重复]的主要内容,如果未能解决你的问题,请参考以下文章