设置display:flex和justify-content:center后子元素未全显示问题

你遇到的问题核心是Flex布局的内容溢出与对齐方式的冲突：

• Flex容器默认采用横向排列（flex-direction: row），每个子元素.dv的宽度为500px，加上左右各19px的margin，单个子元素实际占据538px空间，远超过父容器500px的宽度。
• 当所有子元素的总宽度远超父容器时，justify-content: center会让整个Flex内容块在容器中居中，导致左侧的子元素直接溢出到容器的可视区域之外，看起来像是“消失”了。
• 虽然父容器设置了overflow: auto会生成滚动条，但因为内容居中，初始视图无法看到左侧的子元素，需要向左拖动滚动条才能显示。

根据你的需求，提供几种可行的调整方式：

方案1：让内容从左侧开始排列（初始可见第一个子元素） #

将justify-content: center修改为justify-content: flex-start，这样子元素从容器左侧开始排列，超出部分可通过横向滚动条查看所有元素：

.container{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 修改对齐方式 */
  overflow: auto;
  border: 10px solid rgb(70, 70, 199);  
  width: 500px; 
  height: 500px;
  background-color: blue;  
}
.dv{
  margin: 19px;
  padding: 10px;
  background-color: white;
  border: solid 1px black;
  border-radius: 10px;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  color: black;
  width: 500px; 
  height: 400px;  
}

方案2：让子元素自动换行（避免横向溢出） #

给父容器添加flex-wrap: wrap，子元素会在超出容器宽度时自动换行，同时保留居中对齐：

.container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* 添加自动换行 */
  overflow: auto;
  border: 10px solid rgb(70, 70, 199);  
  width: 500px; 
  height: 500px;
  background-color: blue;  
}
.dv{
  margin: 19px;
  padding: 10px;
  background-color: white;
  border: solid 1px black;
  border-radius: 10px;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  color: black;
  width: 500px; 
  height: 400px;  
}

补充说明 #

父容器中的white-space: pre-line属性对Flex布局没有作用，可以删除，不会影响布局效果。

内容的提问来源于stack exchange，提问作者user3137261