Html 使用flexbox/grid流畅地调整内容大小
如图所示，元素及其内容看起来正常 如图所示，调整页面大小时，内容无法正确调整大小。我知道我必须使用Flexbox来实现这一点，但我不熟悉它 我曾尝试使用媒体查询，但效率很低，有人告诉我，flexbox有一种更简单的方法 我只想内容的大小不打破，或有任何问题 HTMLHtml 使用flexbox/grid流畅地调整内容大小,html,css,flexbox,css-grid,Html,Css,Flexbox,Css Grid,如图所示，元素及其内容看起来正常 如图所示，调整页面大小时，内容无法正确调整大小。我知道我必须使用Flexbox来实现这一点，但我不熟悉它 我曾尝试使用媒体查询，但效率很低，有人告诉我，flexbox有一种更简单的方法 我只想内容的大小不打破，或有任何问题 HTML <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel = "stylesheet" href="style.css">
</head>
<body>
<div class = "main-box">
<div class = "container-parent">
<div class = "container">
<div class = "img-box img-1"></div>
<div class = "offer-details-box">
<div class = "offer-heading">Cash App</div>
<div class = "offer-inst">Install and open the app. Create an account.</div>
<div class = "rbx-amt">
+
<span class = "amt">9</span>
ROBUX
</div>
</div>
</div>
<div class = "container">
<div class = "img-box img-2">
</div>
<div class = "offer-details-box">
<div class = "offer-heading">TikTok</div>
<div class = "offer-inst">Install and open the app. Create an account.</div>
<div class = "rbx-amt">
+
<span class = "amt">10</span>
ROBUX
</div>
</div>
</div>
<div class = "container">
<div class = "img-box img-3">
</div>
<div class = "offer-details-box">
<div class = "offer-heading">Candy Crush</div>
<div class = "offer-inst">Install and open the app. Get to level 10.</div>
<div class = "rbx-amt">
+
<span class = "amt">56</span>
ROBUX
</div>
</div>
</div>
<div class = "container">
<div class = "img-box img-4">
</div>
<div class = "offer-details-box">
<div class = "offer-heading">Twitter Quiz</div>
<div class = "offer-inst">Answer 10 easy questions about Twitter.</div>
<div class = "rbx-amt">
+
<span class = "amt">6</span>
ROBUX
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
（在codepen上看起来断裂-放入html文件）问题在于您在
容器的不同断裂点设置了高度。我已将其更改为自动，现在看起来很好
CODE打开工作代码：
*{页边距：无；
填充：无；
框大小：边框框；
字体系列：“蒙特塞拉特”；}
身体{
高度：100vh；
宽度：100%；}
.主箱{宽度：90%；
边框半径：10px纯黑；
显示：块；
身高：90%；
宽度：90%；
利润率：5%自动；
边界半径：10px；
溢出y：滚动；
}
.容器父级{
边缘顶端：5em；
右边距：自动；
左边距：自动；
显示：内联块；
宽度：100%；
高度：100%；}
.img盒{
背景色：#F4F8；
高度：110px；
宽度：110px；
显示：内联块；
浮动：左；
边缘：1米；
边界半径：10px；
背景尺寸：封面；
背景重复：无重复；
}
.img-1{背景图片：url（img/cash app.png）；
背景大小：100%；
背景重复：无；}
.img-2{背景图像：url（img/tiktok logo.png）；}
.img-3{背景图像：url（img/candy crush.png）；}
.img-4{背景图片：url（img/twitter logo.png）；}
.集装箱{
显示器：flex；
宽度：90%；
高度：自动；
保证金：1em自动；
边界半径：10px；
背景：线性梯度（90度，rgba（0121182,1）0%，rgba（72180255,1）100%）；
盒影：0px 0px 6px 0px rgba（0,0,0,0.25）；
}
.报价标题{
显示：内联块；
字号：1.65em；
文本转换：大写；
填充：0.1米0.25米；
颜色：白色；
边界半径：5px；
字体大小：400；}
.报价说明{
显示：块；
字号：0.95em；
填充：0.1米0.25米；
颜色：白色；
边界半径：5px；
字体大小：300；
文本转换：大写；}
.报盘{
边缘顶部：0.5em；
显示：块；
字号：0.95em；
填充：0.1米0.25米；
颜色：白色；
字号：600；
边界半径：5px；}
.rbx amt{颜色：白色；
字号：1.25em；
背景色：#03be03；
文本对齐：居中；
填充：0.25em；
宽度：200px；
边缘顶部：1米；
边界半径：10px；
}
float:right；}
.报价详情框{
边缘顶部：1.5em；
左边距：1米；
显示：内联块；}
@介质和全部（最大宽度：1024px）
{.img盒{高度：150px；
宽度：150px；}
.rbx金额{字体大小：2em；}
.offer inst{字体大小：1.3em；}
.container{height:auto；}}
@介质和全部（最大宽度：1005px）
{.rbx金额{字体大小：1.5em；
页边距顶部：0.5em；}
@介质和全部（最大宽度：800px）
{.主框{宽度：100%；}
.container{宽度：100%；}
@介质和全部（最大宽度：769px）
{.img盒{高度：120px；}}
@介质和全部（最大宽度：627px）
{.主框{宽度：100%；}
.container{宽度：95%；}
@介质和全部（最大宽度：720px）
{.报价标题{字体大小：1.25em；
页边距顶部：0.25em；}
.offer描述{字体大小：1.1em；}
.提供说明{字体大小：1.1米；
页边距顶部：0.25em；}
.rbx金额{利润上限：1米；
字体大小：1.4em；}
.img框{高度：120px；}
.container{height:auto}}
@全部和全部介质（最大宽度：500px）
{.offer标题{字体大小：0.8em；}
.offer inst{字体大小：0.8em；}
.rbx金额{字体大小：0.9em；}
.container{高度：自动；}
.img盒{宽度：100px；
高度：90px；
边距：0.5em；}}
现金应用程序
安装并打开应用程序。创建一个帐户。
+
9
罗布
TIKTOK
安装并打开应用程序。创建一个帐户。
+
10
罗布
糖果压榨
安装并打开应用程序。到10级。
+
56
罗布
推特测验
回答10个关于Twitter的简单问题。
+
6.
罗布
* {margin: none;
padding: none;
box-sizing: border-box;
font-family: 'Montserrat';}
body {
height: 100vh;
width: 100%;}
.main-box {width: 90%;
border-radius: 10px solid black;
display: block;
height: 90%;
width: 90%;
margin: 5% auto;
border-radius: 10px;
overflow-y: scroll;
}
.container-parent {
margin-top: 5em;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 100%;
height: 100%;}
.img-box {
background-color: #f4f4f8;
height: 110px;
width: 110px;
display: inline-block;
float:left;
margin:1em;
border-radius: 10px;
background-size: cover;
background-repeat: no-repeat;
}
.img-1 {background-image: url(img/cash-app.png);
background-size: 100%;
background-repeat: none;}
.img-2 {background-image: url(img/tiktok-logo.png);}
.img-3 {background-image: url(img/candy-crush.png);}
.img-4 {background-image: url(img/twitter-logo.png);}
.container {
display: flex;
width: 90%;
height: 27%;
margin: 1em auto;
border-radius: 10px;
background: linear-gradient(90deg, rgba(0,121,182,1) 0%, rgba(72,180,255,1) 100%);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.25);
}
.offer-heading {
display: inline-block;
font-size: 1.65em;
text-transform: uppercase;
padding: 0.1em 0.25em;
color: white;
border-radius: 5px;
font-weight: 400;}
.offer-desc {
display:block;
font-size: 0.95em;
padding: 0.1em 0.25em;
color: white;
border-radius: 5px;
font-weight: 300;
text-transform: uppercase;}
.offer-inst {
margin-top: 0.5em;
display:block;
font-size: 0.95em;
padding: 0.1em 0.25em;
color: white;
font-weight: 600;
border-radius: 5px;}
.rbx-amt {color: white;
font-size: 1.25em;
background-color: #03be03;
text-align: center;
padding: 0.25em;
width: 200px;
margin-top: 1em;
border-radius: 10px;
}
float: right;}
.offer-details-box {
margin-top: 1.5em;
margin-left:1em;
display:inline-block;}
@media all and (max-width:1024px)
{.img-box{height: 150px;
width: 150px;}
.rbx-amt {font-size: 2em;}
.offer-inst {font-size: 1.3em;}
.container {height: 30%;}}
@media all and (max-width:1005px)
{.rbx-amt{font-size: 1.5em;
margin-top: 0.5em;}}
@media all and (max-width:800px)
{.main-box{width:100%; }
.container{width: 100%;}}
@media all and (max-width:769px)
{.img-box{height:120px;}}
@media all and (max-width:627px)
{.main-box{width: 100%;}
.container {width: 95%;}}
@media all and (max-width:720px)
{.offer-heading{font-size: 1.25em;
margin-top: 0.25em;}
.offer-desc{font-size: 1.1em;}
.offer-inst {font-size: 1.1em;
margin-top: 0.25em;}
.rbx-amt {margin-top: 1em;
font-size: 1.4em;}
.img-box {height: 120px;}
.container {height: 25%;}}
@media all and (max-width:500px)
{.offer-heading{font-size: 0.8em;}
.offer-inst{font-size: 0.8em;}
.rbx-amt {font-size: 0.9em;}
.container {height: 18%;}
.img-box {width: 100px;
height: 90px;
margin: 0.5em;}}