如何调整Flexbox三列布局尺寸？中间列过宽侧边列过窄

你的代码存在几处问题导致布局不符合预期，以下是具体修复和调整方案：

问题分析 #

1. 类名不匹配：CSS中定义的是.side-columns，但HTML里用的是.side-column，导致侧边列样式未生效。
2. flex比例设置错误：当前.main-column和侧边列的flex:1让三者宽度均分，无法实现中间列更宽的需求。
3. HTML结构错误：</html>标签提前闭合，导致style部分不在head内，存在语法问题。

修改方案 #

1. 修正类名与结构错误 #

先修复HTML结构，将style放到head标签内，同时统一侧边列的类名为.side-column。

2. 调整flex比例实现宽度差异 #

通过设置不同的flex属性值分配宽度：

• 给侧边列设置flex: 1，中间列设置flex: 2，这样中间列宽度是侧边列的2倍（比例可按需调整，比如flex:3对应侧边flex:1就是3:1的宽度比）。
• 若需要固定侧边列宽度，可给侧边列设置flex-basis: 220px; flex-grow: 0;，中间列用flex:1占据剩余所有空间。

修改后的完整代码 #

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>home</title>
  <style>
    .page-wrapper {
      margin: 20px;
    }
    
    .row {
      display: flex;
      flex-direction: row;
      width: 100%;
    }
    
    .main-column {
      display: flex;
      flex-direction: column;
      flex: 2; /* 中间列占2份宽度 */
    }
    
    .side-column {
      display: flex;
      flex-direction: column;
      flex: 1; /* 侧边列各占1份宽度 */
    }
    
    .header-and-footer {
      width: 100%;
    }
    
    .header {
      height: 30px;
      background-color: deeppink;
    }
    
    .footer {
      height: 30px;
      background-color: indianred;
    }
    
    .left-column {
      height: 540px;
      background-color: lightblue;
    }
    
    .main-content {
      height: 540px;
      background-color: green;
    }
    
    .right-column {
      height: 540px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="page-wrapper">
    <!--header-->
    <div class="row">
      <div class="header-and-footer">
        <div class="header">
          header
        </div>
      </div>
    </div>

    <!--三列布局-->
    <div class="row">
      <div class="side-column">
        <div class="left-column">
          left column
        </div>
      </div>

      <div class="main-column">
        <div class="main-content">
          main column
        </div>
      </div>

      <div class="side-column">
        <div class="right-column">
          right column
        </div>
      </div>
    </div>

    <!--footer-->
    <div class="row">
      <div class="header-and-footer">
        <div class="footer">
          footer
        </div>
      </div>
    </div>
  </div>
</body>
</html>

额外说明 #

• 若希望小屏幕下三列自动换行，可给.row添加flex-wrap: wrap属性。
• 固定侧边宽度的场景下，将.side-column的样式改为：

  .side-column {
    display: flex;
    flex-direction: column;
    flex-basis: 200px;
    flex-grow: 0;
  }
  

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