CSS中的内容没有正确地对齐-内容中心

Question

我需要集中内容，就像在那里一样。当我使用正当-内容:中心，它会被打破。

​

​

对于正当性内容中心，如下所示：

​

​

HTML / JSX

    <div className={styles.contentBodyTab}>
      <div className={styles.containerBrands}>
        {data.map((item) => (
          <div className={styles.brand} />
        ))}
      </div>
    </div>

社联(社联)

.contentBodyTab {
  background: red;
}

.containerBrands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.brand {
   background: chartreuse;
   margin: 2px;
   width: 190px;
   height: 130px;
}

Answer 1

编辑：，我的答案是，我认为你在第一张截图中得到了你想要的结果。如果这不是真的，请用期望的结果更新您的帖子:)

您需要将display: flex;和justify-content: flex-start;添加到：

<div key={String(item)} className={styles.containerBrand}>
  {..}
</div>

这样做是可行的：

​

.contentBodyTab {
  background: red;
}
.containerBrand {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.brand {
  background: chartreuse;
  margin: 2px;
  width: 190px;
  height: 130px;
  flex-shrink: 0;
  flex-grow: 0;
}

<div class="contentBodyTab">
  <div class="containerBrands">
    <div class="containerBrand">
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
      <div class="brand"></div>
    </div>
  </div>
</div> 

​