div 在列上时宽度不一样

Question

在将方向更改为

max-width 400px;

后，我尝试使用

flex-direction: column;

创建 3 div 容器，但我丢失了容器的宽度。

（将 flex-direction 更改为列后，我的容器的顺序不同）

如图所示，弹性行将使盒子正确分配，如果我切换到列，容器不会采用定义的

max-width 400px;

。

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;
  }
}

<!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 &amp; 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>

Answer 1

你累了吗

.container { max-width: 400px; }

偶然吗？

div 在列上时宽度不一样

问题描述投票：0回答：1

1个回答

最新问题

div 在列上时宽度不一样

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1