Flexbox纵向排列时子容器无法左对齐问题求助

问题根源 #

当屏幕宽度小于1300px时，.home-content容器没有固定宽度，会随着Typed.js生成的文本长度动态伸缩。加上Flex布局默认让子项自适应内容宽度，导致整个容器跟着文本左右偏移，影响阅读体验。

解决方案 #

要让文字在居中容器内始终左对齐且容器不偏移，需给内容容器设置固定宽度范围，同时让容器在父级居中，内部文本保持左对齐。

修改步骤 #

1. 调整.home的Flex布局，在窄屏时让内容容器居中
2. 给.home-content设置最大宽度并强制内部文本左对齐
3. 给包含Typed.js的标题设置最小宽度，避免文本长度变化引发容器宽度波动

修改后的CSS代码 #

在现有媒体查询中添加/修改以下样式：

/* --------- Home 基础样式保持不变 --------- */
.home {
  padding: 160px 5% 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ... 其他原有样式 ... */

@media (max-width: 1300px) {
  html {
    font-size: 55%;
  }
  section {
    padding: 160px 3% 32px;
  }
  .footer {
    padding: 32px 3%;
  }
  .projects {
    padding-top: 90px;
    padding-bottom: 90px;
  }
  .projects h2 {
    font-size: 60px;
    margin-bottom: 50px;
  }
  .projects-layer h4 {
    font-size: 30px;
  }
  .projects-layer p {
    font-size: 18px;
    margin: 5px 0 16px;
  }
  
  /* 新增窄屏布局调整 */
  .home {
    justify-content: center;
  }
  .home-content {
    max-width: 600px;
    width: 100%;
    text-align: left;
  }
  /* 固定打字标题宽度，避免内容伸缩导致偏移 */
  .home-content h3:last-of-type {
    min-width: 350px; /* 根据最长文本长度调整 */
  }
}

@media (max-width: 1100px) {
  #menu-icon {
    display: block;
  }
  .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 16px 3%;
    background: var(--bg-color);
    border-top: 2px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    display: none;
  }
  .navbar.active {
    display: block;
  }
  .navbar a {
    display: block;
    font-size: 24px;
    margin: 40px;
    text-align: center;
  }
  .home {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .home .home-content h3 {
    font-size: 40px;
  }
  .home-content h1 {
    font-size: 50px;
  }
  .home-img img {
    width: 50vw;
    margin-top: 48px;
  }
  
  /* 保持垂直布局时内容左对齐 */
  .home-content {
    max-width: 600px;
    width: 100%;
    text-align: left;
  }
}

效果说明 #

• .home-content的max-width和width:100%：让容器在父级居中，同时限制宽度避免过宽
• text-align:left：强制容器内所有文本左对齐，不受父级居中影响
• min-width：固定打字标题的最小宽度，防止文本长度变化导致容器整体偏移

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