CSS - 为什么隐藏 flexbox 的开头？以及如何解决保持项目居中的问题？ [复制]答案

【问题标题】：CSS - Why is the start of the flexbox hidden ? And how to solve keeping items centered? [duplicate]CSS - 为什么隐藏 flexbox 的开头？以及如何解决保持项目居中的问题？ [复制]
【发布时间】：2018-08-23 03:01:02
【问题描述】：

在下面的 sn-p 中，你将看不到 flexbox 的第一个项目。
为什么？如何解决这个问题用户可以水平滚动查看所有项目？

<div style="display: flex; justify-content: center; overflow: auto; padding: 30px 0">
  <div style="padding: 0 15px">AAAAAA</div>
  <div style="padding: 0 15px">BBBBBB</div>
  <div style="padding: 0 15px">CCCCCC</div>
  <div style="padding: 0 15px">DDDDDDD</div>
  <div style="padding: 0 15px">EEEEEEE</div>
  <div style="padding: 0 15px">FFFFFFF</div>
  <div style="padding: 0 15px">GGGGGGG</div>
  <div style="padding: 0 15px">HHHHHHH</div>
  <div style="padding: 0 15px">iiiiiii</div>
  <div style="padding: 0 15px">JJJJJJJ</div>
  <div style="padding: 0 15px">KKKKKKK</div>
  <div style="padding: 0 15px">LLLLLLL</div>
  <div style="padding: 0 15px">MMMMMMM</div>
  <div style="padding: 0 15px">OOOOOOO</div>
</div>

<div style="text-align: center">Scroll horizontally the letters above.</div>

【问题讨论】：

改用自动边距：jsfiddle.net/dk9e3b85 ... 重复链接解释了原因。

标签： css flexbox

【解决方案1】：

Flex 尝试将每个项目都放在同一行中。如果你想让项目居中添加flex-wrap: wrap 到容器中。如果您想将它们保持在同一行，尽管您必须将justify-content 更改为flex-start。这是flex-wrap 解决方案的示例。

<div style="display: flex; flex-wrap: wrap; justify-content: center; overflow: auto; padding: 30px 0">
  <div style="padding: 0 15px">AAAAAA</div>
  <div style="padding: 0 15px">BBBBBB</div>
  <div style="padding: 0 15px">CCCCCC</div>
  <div style="padding: 0 15px">DDDDDDD</div>
  <div style="padding: 0 15px">EEEEEEE</div>
  <div style="padding: 0 15px">FFFFFFF</div>
  <div style="padding: 0 15px">GGGGGGG</div>
  <div style="padding: 0 15px">HHHHHHH</div>
  <div style="padding: 0 15px">iiiiiii</div>
  <div style="padding: 0 15px">JJJJJJJ</div>
  <div style="padding: 0 15px">KKKKKKK</div>
  <div style="padding: 0 15px">LLLLLLL</div>
  <div style="padding: 0 15px">MMMMMMM</div>
  <div style="padding: 0 15px">OOOOOOO</div>
</div>

<div style="text-align: center">Scroll horizontally the letters above.</div>

【讨论】：

当屏幕变大时，我需要对齐内容以使项目居中。如何防止 flexbox 剪切保留 justify-content 的项目？
@Yairopro 如果您需要所有项目始终位于同一行，您可以使用媒体查询将justify-content: center 添加到更大的屏幕。
我无法使用媒体查询。因为我无法知道 flexbox 中有多少项目，也无法知道它们的大小。并且使用媒体查询使 flexbox 依赖于窗口的宽度，而不是组件的宽度
@Yairopro 我用一个使每个项目居中的示例更新了我的答案。这个解决方案有效吗？
如果您的项目数量是动态的，您需要在视口大小上使用媒体查询，您的内容将开始出现问题。

【解决方案2】：

您使用的是justify-content: center，因此根据屏幕/视口大小，开始和结束元素将被截断。

【讨论】：

当屏幕变大时，我需要对齐内容以使项目居中。如何防止 flexbox 剪切保留 justify-content 的项目？

【解决方案3】：

删除justify-content: center;。它总是使您的内容在视口内居中。谢谢。

【讨论】：

当屏幕变大时，我需要对齐内容以使项目居中。如何防止 flexbox 剪切保留 justify-content 的项目？

【解决方案4】：

只需删除justify-content: center，因为内容在视口中心对齐，当内容大于视口时，两侧将不得不被切断。

【讨论】：

当视口较大时，我需要它来让项目居中。
当视口超过一定大小时，您可以使用响应式媒体查询来应用justify-content: center。
另外，您的问题询问为什么会发生这种截止：这肯定是由于使用了justify-content: center - 这就是为什么，无论您是否需要使用该属性，这就是原因这个问题的。如果您现在有新问题要提出问题，请提出新问题。
@DrCord 您部分回答了“为什么”这个问题。说“证明内容”是原因并不能解释原因。这不是删除我故意放置的“证明内容”的解决方案。并且使用媒体查询不是一个好的解决方案，因为它使组件依赖于窗口的大小而不是它自己。
在上面添加了进一步的解释。在某些情况下，使用媒体查询是合理应用 css 的唯一解决方案。该组件已经依赖于视口大小：如果视口大小与内容不兼容，则无法查看它...