多个子元素在父容器中动态排列问题

2025.02.14

问题描述

多个子元素在父容器中横向排列，若这些子元素超出父容器，则居左排列并允许横向滚动；若这些子元素未超出父容器，则居中排列。

解决过程与方案

<div class="parent">
  <div class="child">Item 1</div>
  <div class="child">Item 2</div>
  <div class="child">Item 3</div>
</div>

.parent {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  width: 100%; /* 根据实际需求调整父容器宽度 */
}

.child {
  flex-shrink: 0; /* 防止子元素被压缩 */
  /* 子元素样式，如宽度、边距等 */
  margin: 0 10px; /* 示例间距 */
}

.child:first-child {
  margin-left: auto; /* 左侧自动外边距 */
}

.child:last-child {
  margin-right: auto; /* 右侧自动外边距 */
}