为什么在使用 align-items 时，它会更改其中一个 flex 项目的大小？

Why when use align-items, it changes the size of one of the flex items?

提问人：king342 提问时间：11/3/2023 最后编辑：Chris Barrking342 更新时间：11/3/2023 访问量：44

问：

我使用flex box进行响应式设计。我没有更改每个弹性项目的大小。但是，当我应用 align-items：center 时，当它以垂直视图显示时，它会更改第一个 flex 项目（图片 2）的大小。但是，图片 1 完全没问题 导致这种情况的问题是什么？（添加到媒体查询并不能解决问题;向每个 Flex 项目添加和添加内容也不能解决问题）height:100%flex: 1max-width:400px

图1PICTURE 1

图2PICTURE 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>

CSS Flexbox 响应式设计

评论

0赞 Chris Barr 11/3/2023
发生这种情况的原因是因为第一个盒子更小。价格为 9.99 美元，比所有其他价格较多的盒子的字符数更少，这使得盒子更宽。如果你想让它们都匹配，你必须对一个或一些东西进行硬编码width: 400px;

答：

0赞 Terry Vivek 11/3/2023 #1

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

0赞 Tim R 11/3/2023 #2

框的宽度不会改变。但是，当水平放置时，第一个盒子更窄并不明显。您可以在价格之前或之后添加一个不间断空格以匹配字符长度，也可以添加一些 CSS 声明：&nbsp;

.pricing-container {
  width: min-content;
  margin: auto;
}

@media (max-width: 1250px) {
  .pricing-container {
    align-items: normal;   
  }
}


此外，我建议您替换 ，以便在视口高度小于三个框的高度时不会剪裁内容。heightmin-height

.pricing-container {
  /* height: 100vh; */
  min-height: 100vh;
}


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;
  min-height: 100vh;
  width: min-content;
  margin: auto;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

/* Hint: What can you do with a media query and flexbox? */
@media (max-width: 1250px) {
  .pricing-container {
    flex-direction: column;
    align-items: normal;
  }
}
<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>

上一个：如何使此布局具有响应性？

下一个：对角线图像滑块在移动设备上不起作用