CSS Flex Container内容对齐问题：justify-content设置无效求助

问题根源 #

justify-content 是flex容器的专属属性，用于控制容器内子元素的水平排列方式，你把它应用在flex子项（.flex1、.flex2）上完全无效，这是导致对齐失败的核心原因。

修正方案 #

要实现第一个flex-container内两个表格左右对齐、下方表格居中的效果，直接调整容器的flex属性即可，以下是完整可运行的代码：

CSS 代码

/* 定义flex容器基础样式 */
flex-container {
  display: flex;
  width: 100%; /* 必须占满父元素宽度，否则无法实现两端对齐 */
  margin-bottom: 16px; /* 与下方表格保持间距 */
}

/* 第一个容器：子项两端对齐 */
flex-container:first-of-type {
  justify-content: space-between;
}

/* 第二个容器：表格居中显示 */
flex-container:last-of-type {
  justify-content: center;
}

/* 表格样式优化（可选，提升美观度） */
table {
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #ccc;
  padding: 6px 10px;
}

HTML 代码

<div class="content" style="border: 2px solid; padding: 16px;">
  <flex-container>
    <flex-item class="flex1">
      <div>
        <table>
          <tr><th>1</th><td>Left line1</td></tr>
          <tr><th>2</th><td>Left line2</td></tr>
          <tr><th>3</th><td>Left line3</td></tr>
          <tr><th>4</th><td>Left line4</td></tr>
        </table>
      </div>
    </flex-item>

    <flex-item class="flex2">
      <div>
        <table>
          <tr><th>1</th><td>Right line1</td></tr>
          <tr><th>2</th><td>Right line2</td></tr>
          <tr><th>3</th><td>Right line3</td></tr>
          <tr><th>4</th><td>Right line4</td></tr>
        </table>
      </div>
    </flex-item>
  </flex-container>

  <flex-container>
    <table style="border: 1px solid black;">
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      
      <tr>
        <td>Data1 for Column1</td>
        <td>Data1 for Column2</td>
        <td>Data1 for Column3</td>
        <td>Data1 for Column4</td>
        <td>Data1 for Column5</td>
      </tr>
      <tr>
        <td>Data2 for Column1</td>
        <td>Data2 for Column2</td>
        <td>Data2 for Column3</td>
        <td>Data2 for Column4</td>
        <td>Data2 for Column5</td>
      </tr>
    </table>
  </flex-container>
</div>

核心修改说明 #

1. 给flex-container设置width: 100%：确保容器能利用父元素的全部宽度，为justify-content提供生效空间。
2. 第一个容器使用justify-content: space-between：让两个子表格自动贴紧容器左右边缘，完美实现你要的左右对齐效果。
3. 移除.flex1、.flex2上无效的justify-content属性：这些属性对flex子项没有作用，完全是误用。
4. 第二个容器设置justify-content: center：让下方的宽表格居中显示，匹配预期效果。

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