Flex布局改为column后容器宽度不一致问题求助

我创建了3个设置max-width: 300px的div容器，在flex row模式下布局分配正常，但切换为column后，容器未采用定义的max-width，宽度被拉伸至父容器的水平宽度。

原始代码 #

CSS代码 #

body {
  font-family: "Sono", sans-serif;
}

.pricing-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.pricing-plan {
  padding-top: 10px;
  background: rgb(245, 241, 241);
  flex: 1;
  text-align: center;
  max-width: 300px;
  border-radius:5px ;
}

.plan-title {
  font-size: 20px;
  font-weight: 1000;
}

.plan-price {
  font-size: 25px;
  font-weight:800;
}

ul {
  list-style-type: none;
}

li {
  padding: 5px;
}

.plan-button {
  margin-bottom: 10px;
  background-color: rgb(255, 94, 0);
  border-radius: 5px;
  padding: 10px;
  font-size: 11px;
  color: white;
  border: 0px white;
}

@media (max-width: 1000px) {
  .pricing-container {
    flex-direction: column;
  }
}

HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Flexbox Pricing Table</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="pricing-container">
      <div class="pricing-plan">
        <div class="plan-title">Normal</div>
        <div class="plan-price">$9/month</div>
        <ul class="plan-features">
          <li>10GB Storage</li>
          <li> 1 User</li>
          <li>🚫 Support</li>
        </ul>
        <button class="plan-button">Sign Up</button>
      </div>
      <div class="pricing-plan">
        <div class="plan-title">Standard</div>
        <div class="plan-price">$19.99/month</div>
        <ul class="plan-features">
          <li>50GB Storage</li>
          <li>5 Users</li>
          <li> Phone & Email Support</li>
        </ul>
        <button class="plan-button">Sign Up</button>
      </div>
      <div class="pricing-plan">
        <div class="plan-title">Premium</div>
        <div class="plan-price">$49.99/month</div>
        <ul class="plan-features">
          <li> 100GB Storage</li>
          <li> 10 Users</li>
          <li> 24/7 Support</li>
        </ul>
        <button class="plan-button">Sign Up</button>
      </div>
    </div>
  </body>
</html>

原因分析 #

核心问题出在flex: 1和flex方向的交互上：

• 当flex-direction: row时，flex:1控制水平方向的空间分配，子元素会平分可用宽度，同时max-width:300px会限制其最大宽度，表现正常。
• 切换为flex-direction: column后，flex:1的作用轴变为垂直方向，它会让子元素尽可能拉伸高度；而水平方向上，flex子元素默认的align-self: stretch会让子元素撑满父容器的水平宽度，导致max-width的限制失效。

解决方案 #

方案1：重置column模式下的flex属性并居中子元素 #

在媒体查询中，修改子元素的flex属性，同时设置align-self: center让子元素水平居中，保留max-width的作用：

@media (max-width: 1000px) {
  .pricing-container {
    flex-direction: column;
  }
  .pricing-plan {
    flex: initial; /* 取消垂直方向的拉伸 */
    align-self: center; /* 水平居中，保持max-width限制 */
  }
}

方案2：给子元素添加宽度限制 #

直接给子元素设置width: min(100%, 300px)，这样在row和column模式下都能自动适配，同时不超过max-width：

.pricing-plan {
  padding-top: 10px;
  background: rgb(245, 241, 241);
  flex: 1;
  text-align: center;
  max-width: 300px;
  width: min(100%, 300px); /* 添加该行 */
  border-radius:5px ;
}

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