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

【问题标题】：How do I display content cards evenly spaced including margin sides using flexbox [duplicate]如何使用 flexbox 均匀地显示内容卡，包括边距边 [重复]
【发布时间】：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！

【问题讨论】：

标签： html css django flexbox

【解决方案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;

【讨论】：