内容在 CSS 中未正确居中 |对齐内容中心 [重复]

Question

我需要以与现有内容相同的方式集中内容。当我使用 justify-content:center 时，它会坏掉。

使用 justify 内容中心，它看起来像这样：

HTML / JSX

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

CSS (SASS)

.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>