以特定孩子为中心，让其他孩子调整位置

Question

我想并排放置几个元素（最多大约 10 个）（我正在考虑使用

justify-content: center

的 Flexbox，但这不是一个硬性要求）并让其中一个居中（例如，其兄弟姐妹中唯一的一个）匹配

.selected

），其他（后面和前面）自然出现在其两侧。如果元素在任何一侧溢出容器，则应该可以滚动。这些元素可以具有不同的尺寸。可以用纯CSS完成吗？

Answer 1

这很接近吗？

.d1 {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  gap: 10px;
  padding: 0 50% 1em;
}

.d1>* {
  width: 100px;
  aspect-ratio: 1/1;
  background: blue;
  color: white;
  scroll-snap-align: center;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}


p {
  text-align: center;
  margin: 5px;
  line-height: 0.8;
}

<p>|<br>|<br>|</p>
<div class="d1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>
<p>|<br>|<br>|</p>