为什么当使用align-items时，它会改变其中一个弹性项目的大小？

Question

我使用弹性盒进行响应式设计。我没有改变每个弹性项目的大小。但是，当我应用align-items:center时，它会更改第一个弹性项目（图2）在垂直视图中显示时的大小。但是，图1完全没问题，导致此问题的原因是什么？ （在媒体查询中添加

height:100%

并不能解决问题；向每个弹性项目添加

flex: 1

和

max-width:400px

也不能解决问题）

图1

图2

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

.pricing-plan {
  background-color: #F2F2F2;
  padding: 20px;
  text-align: center;
}
.plan-button {
  background-color: #FF6600;
  color: white;
  border: none;
  font-size: 13.3333px;
  padding: 10px;
}
.plan-title {
  font-size: 24px;
  font-weight: bold;
}
.plan-price {
  font-size: 48px;
  font-weight: bold;
}
.plan-features {
  list-style-type: none;
}
.pricing-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

/* Hint: What can you do with a media query and flexbox? */
@media (max-width: 1250px) {
  .pricing-container{
    flex-direction: column;   
  }
}

<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">

<div class="pricing-container">
  <div class="pricing-plan">
    <div class="plan-title">Basic</div>
    <div class="plan-price">$9.99/month</div>
    <ul class="plan-features">
      <li>✅ 10GB Storage</li>
      <li>✅ 1 User</li>
      <li>🚫 Support</li>
    </ul>
    <button class="plan-button">Sign Up</a>
  </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 &amp; Email Support</li>
    </ul>
    <button class="plan-button">Sign Up</a>
  </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</a>
  </div>
</div>

Answer 1

主要原因是框中价格的长度（文本长度）。我们可以为每个项目设置最小宽度来修复它。