CSS flex-start 项目没有居中答案

【问题标题】：CSS flex-start items doesn't get centeredCSS flex-start 项目没有居中
【发布时间】：2021-09-09 03:48:03
【问题描述】：

所以我有这个带有 justify-content: flex-start 的 flex 容器，我想将其中的项目居中。

编辑：为了比较，我希望它类似于 youtube 主页视频推荐。

这是我的代码，我不明白为什么它不起作用：（它看起来像居中，但子容器没有留下宽度，请使用开发工具并将鼠标悬停在子容器上你会看到它)

.parent {
  width: 100%;
  margin: 0 auto;
  max-width:500px
}

.child {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.item {
  background-color: #4d4d4d;
  margin: 5px 5px;
  width: 125px;
  height: 100px;
}

<div class="parent">
  <div class="child">
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div><div class="item">
      item
    </div><div class="item">
  item
</div><div class="item">
  item
</div><div class="item">
      item
    </div><div class="item">
      item
    </div>
  </div>
</div>

这就是我想要的：（我知道它没有居中，但关键是我想要 flex-start 与 margin 0 auto，希望它有意义）

.parent {
  width: "100%";
  margin-left: 15%;
  max-width:500px
}

.child {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.item {
  background-color: #4d4d4d;
  margin: 5px 5px;
  width: 100px;
  height: 100px;
}

<div class="parent">
  <div class="child">
    <div class="item">
      item
    </div><div class="item">
  item
</div><div class="item">
      item
    </div><div class="item">
  item
</div><div class="item">
  item
</div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div><div class="item">
      item
    </div><div class="item">
      item
    </div><div class="item">
      item
    </div>
  </div>
</div>

感谢回复

【问题讨论】：

如果你把margin: auto;换成.parent，你会得到想要的结果吗？
@s.kuznetsov 还是一样
请显示所需结果的屏幕截图。那些。你到底想如何居中？
@s.kuznetsov 就像第二个 sn-p，我不知道如何居中。
我怀疑您不想要 flex start，但您想要与盒子的包装方式有关。你描述的是居中的。

标签： html css

【解决方案1】：

这是一个 CSS 网格作业

.parent {
  width: 100%;
  margin: 0 auto;
  max-width: 500px;
  border:1px solid red;
}

.child {
  display:grid;
  grid-template-columns:repeat(auto-fit,125px); /* define the width here */
  grid-gap:5px; /* this is your margin */
  justify-content:center; /* center everything */
}

.item {
  background-color: #4d4d4d;
  height: 100px; /* you only need to define the height, you can also do it with grid-auto-rows:100px */
}

<div class="parent">
  <div class="child">
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
  </div>
</div>

【讨论】：

[请注意：我记得有一个类似的问题，但找不到。稍后尝试寻找它]

【解决方案2】：

正如我的评论所说

它不会居中，因为您的父项的最大宽度为 500，您的每个项目都是 125 像素宽 + 每边 5 像素，这使得它们总共有 135 像素宽，因为 135 像素 x 4 大于 500，所以最后一个盒子包装并且整个东西没有居中，因为您的 flex 容器正在使用 flex-start。您需要确保您的容器和项目宽度正确相加以实现您想要的布局

我将项目宽度更改为 115 像素，因此 4 个框正确加起来为 500，而无需调整当前边距。您还可以调整容器宽度或调整边距。只要数学计算出来，它的中心就会超过 500 像素宽

.parent {
  width: 100%;
  margin: 0 auto;
  max-width:500px
}

.child {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.item {
  background-color: #4d4d4d;
  margin: 5px;
  width: 115px;
  height: 100px;
}

<div class="parent">
  <div class="child">
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div><div class="item">
      item
    </div><div class="item">
  item
</div><div class="item">
  item
</div><div class="item">
      item
    </div><div class="item">
      item
    </div>
  </div>
</div>

【讨论】：

问题是我不知道有多少项目，当屏幕尺寸越来越大时，这种方法将无关紧要
如果您想使用当前的方法，那么您需要为每个框设置固定宽度的内容容器和项目宽度，然后一旦屏幕尺寸小于您的内容容器，数字需要更改（媒体查询）。从顶层看，您正在创建一个网格系统。就原始问题而言，上述答案解释并回答了它。
所以如果我使用网格系统，我可以在没有媒体查询的情况下实现它吗？
有现有的网格系统，例如引导程序，您可以定义具有百分比宽度的网格系统并避免媒体查询，但它很可能无法在所有尺寸/设备上都很好地工作。我不知道有任何网站响应迅速且不使用媒体查询。媒体查询是 css 的一部分，应该使用
如果您希望网站在所有尺寸上都看起来不错，则无法避免媒体查询。您很可能总共可以使用 4-5 个断点。如果您有一个网站，其中所有元素只是堆叠在一起，那么您可能无法使用媒体查询，但话又说回来，当屏幕变大或变小时，可能需要更改某些字体大小。

【解决方案3】：

使用 flex 使 div 居中：

.parent , body {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}

就我个人而言，我不使用margin: 0 auto; 技巧，因为它对我来说效果不佳。

希望我回答了你的问题。

【讨论】：

感谢您的回答，但没有成功