我希望 div panel_pricing-table 成為一個 flexbox，以便當我縮小視窗時，其中的所有元素也留在這個框中。我的問題是，如果我縮小瀏覽器視窗，flexbox 中的元素不會縮小。錯誤在 CSS 中，但我沒有找到它。你能幫我嗎？
問題截圖
這是我的 HTML：
html {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body{
background-color: #3a86ff;
}
.panel_pricing-table{
width:80%;
margin: 0 auto;
display :flex;
transform: translateY(70%);
background-color: aliceblue;
min-width: 40px;
max-width: 34200px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price Tiers</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans:400,600,700">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="panel_pricing-table">
<div class="pricing-plan">
<img src="icons/icon1.png" alt="" class="pricing-img">
<h2 class="pricing-header">Personal</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Custom domains</li>
<li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
</ul>
<span class="pricing-price">Free</span>
<a href="#/" class="pricing-button">Sign up</a>
</div>
<div class="pricing-plan">
<img src="icons/icon2.png" alt="" class="pricing-img">
<h2 class="pricing-header">Small team</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Never sleeps</li>
<li class="pricing-features-item">Multiple workers for more powerful apps</li>
</ul>
<span class="pricing-price">$150</span>
<a href="#/" class="pricing-button is-featured">Free trial</a>
</div>
<div class="pricing-plan">
<img src="icons/icon3.png" alt="" class="pricing-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
<a href="#/" class="pricing-button">Free trial</a>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
你應該學習responsive_html，它會解決問題
uj5u.com熱心網友回復：
一種（在我看來很臟）縮小元素的方法是使用transform: scale(x)x 小于 1。
您可能想要做的是在較小的視口上使用較小的字體大小。了解更多關于 css 中的回應能力的一個很好的起點是閱讀媒體查詢：mdn docs
uj5u.com熱心網友回復：
將此添加到您的 css 檔案中。你必須把你的影像尺寸變小
供我參考，我保持寬度 80 你可以保留任何你想要的
.pricing-img{
width:80%
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/537403.html
標籤：网页格式CSS弹性盒子