css - 如何集中一组 div，让最后一个左对齐？

Question

我想布置一组 div，类为 cards，由类为 card-wrapper 的 div 集中，但还有剩余的 .cards 在最后一行左对齐，如线框所示。

我的想法是，如果我的屏幕宽度较窄，布局可以变成 3 或 2 甚至 1 列，但整个包装始终居中，但最后一行的 .cards 对齐离开了。

这是我的代码。

CSS

body{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
}

.cards-wrapper{
  background: #fff;
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.card{
  width: 20%;
  height: 300px;
  background: #eee;
  margin-bottom: 20px;
  margin: 20px;
  text-align: left;
}

HTML

<div class="cards-wrapper">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>
  <div class="card">7</div>
  <div class="card">8</div>
  <div class="card">9</div>
</div>

Codepen

Answer 1

请添加如下代码。

HTML

<div class="cards-wrapper">
    <div class="cards-wrapper-inner">
      <div class="card">1</div>
      <div class="card">2</div>
      <div class="card">3</div>
      <div class="card">4</div>
      <div class="card">5</div>
      <div class="card">6</div>
      <div class="card">7</div>
      <div class="card">8</div>
      <div class="card">9</div>
    </div>
</div>

CSS

body{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
}

.cards-wrapper{
  background: #fff;
  width: 90%;
  margin: 0 auto;

}
.cards-wrapper-inner {
    display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*justify-content: center;*/
  align-items: center;
  width: 93%;
  margin: 0 auto
}

.card{
  width: 20%;
  height: 300px;
  background: #eee;
  margin-bottom: 20px;
  margin: 20px;
  text-align: left;
}