javascript - 如何对齐html？

Question

我正在使用 display flex 在一个大容器 (parentDiv) 中显示多个元素。代码工作正常，但我在水平居中元素时遇到了很大的问题(特别是如果只有少数元素，它们应该水平居中)所以我使用了justify-content 是什么导致了大问题:

The parent div is not able to display all items anymore. The first item that gets displayed is the item "04" while it should be "01". How to avoid this?

请看这段代码:

#bigDiv {
  position: absolute;
  width: 100%;
  height: 100%;
}

#parentDiv {
  width: 90%;
  height: 50%;
  overflow-y: hidden;
  overflow-x: scroll;
  text-align: center;
  white-space: nowrap;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  color: white;
  background: blue;
  flex: 0 0 4%;
  margin: 0 3%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div id="bigDiv">
  <div id="parentDiv">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
    <div class="item">05</div>
    <div class="item">06</div>
    <div class="item">07</div>
    <div class="item">08</div>
    <div class="item">09</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
  </div>
</div>

看这张图:

我的意图:父 div 应该能够显示所有元素(从“01”开始 - 最后一个元素应该是“16”-one)

注意:如果只有 4 个或更少的元素，它们应该水平居中。 (我添加 justify-content 的原因)。

Answer 1

您正在将 160% 放入 100%。你希望它居中。它起作用了:生成的子项的 160% 总宽度很好地居中。

但是您还期望可以访问父级之外的任何内容。

这非常类似于让子元素超出其父元素向左或顶部移动 -30%(通过任何其他方法)并期望父元素允许您滚动到它。这不会发生!

如果是这样， child 将不再被放置在 -30%，它将被放置在 0%。滚动条永远不会滚动到左侧或顶部的负空间。这是设计使然。在设计页面时需要考虑到这一点。

每当您将一个较大的子项置于较小的父项中时，您将无法使用父项的滚动条滚动到子项的开头。所以任何东西阻止子元素定位在父元素的左侧负空间中都会解决这个问题。