卡片布局换行时如何保持标题左对齐且卡片居中？

问题核心 #

当前布局在卡片横向排列时能满足标题与卡片左对齐、整体居中的需求，但卡片换行纵向排列后，卡片容器无法自适应宽度导致卡片不再居中，调整对齐方式又会破坏标题与卡片的左对齐关系。

关键修改思路 #

让包含标题和卡片的.content容器自适应卡片布局的宽度，而非占满父容器宽度，既保持标题与卡片的左对齐，又能通过父容器的居中逻辑让整体始终居中；同时给卡片布局添加居中对齐，确保换行后卡片在容器内居中。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
      .card {
        display: flex;
        flex-direction: column;
        width: 170px;
        height: 170px;
        background-color: lightblue;
        color: white;
        padding: 16px;
        border-radius: 20px;
      }

      .card-layout {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center; /* 卡片换行后在容器内居中 */
      }

      .content {
        margin: 0px auto;
        display: flex;
        flex-direction: column; 
        align-items: start;
        align-self: flex-start; /* 容器自适应内容宽度，不占满父容器 */
        max-width: 100%; /* 防止极宽屏幕下内容过度拉伸 */
      }

      .center {
        display: flex;
        justify-content: center;
        width: 100%; /* 确保父容器占满视口宽度 */
      }
    </style>
    
</head>
<body>
  <div class="center">
    <div class="content">
      <h2>HELLO</h2>

      <div class="card-layout">
        <div class="card">
          <h2>Some random information.</h2>
          <div class="subtext">
            <p class="secondary-text">this is some subtext under an illustration or image</p>
          </div>
        </div>

        <div class="card">
          <h2>Some random information.</h2>
          <div class="subtext">
            <p class="secondary-text">this is some subtext under an illustration or image</p>
          </div>
        </div>

        <div class="card">
          <h2>Some random information.</h2>
          <div class="subtext">
            <p class="secondary-text">this is some subtext under an illustration or image</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

改动说明 #

1. .content添加align-self: flex-start：默认flex子项会拉伸占满父容器宽度，这个属性让.content只占自身内容的宽度，确保标题左边缘始终和卡片布局左边缘对齐，同时父容器的居中逻辑能让这个自适应宽度的容器保持整体居中。
2. .card-layout添加justify-content: center：卡片换行后，确保卡片在自身容器内居中排列，避免左偏。
3. .center添加width: 100%：保证父容器占满整个视口宽度，让居中逻辑正常生效。

无论窗口如何缩放，卡片是横向还是纵向排列，都能同时满足整体居中、标题与卡片左对齐的需求。

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