如何使用 flexbox 均匀地显示内容卡,包括边距边 [重复]

Posted

技术标签:

【中文标题】如何使用 flexbox 均匀地显示内容卡,包括边距边 [重复]【英文标题】:How do I display content cards evenly spaced including margin sides using flexbox [duplicate] 【发布时间】:2020-09-10 03:17:13 【问题描述】:

html

<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 均匀地显示内容卡,包括边距边 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

具有“溢出:隐藏”溢出祖父母边距的 Flexbox 子项

如何在顶部较大区域正确布局flexbox

Flexbox 挑战:如何在整行中使用相同且均匀的边距进行换行

修复了 flexbox 项内的元素

如何使 flexbox 项目的大小相同?

如何使用 flexbox 制作灵活的 2x3 网格