我是 css 新手，我需要帮助解决一个问题。为什么 flex-grow 不会将 block__column_2 div 扩展到屏幕末尾？根据课程理论，这应该是预期的行为。请告诉我我做错了什么？
代码示例如下所示。索引.html + 样式.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="block">
<div class="block__row">
<div class="block__column block__column_1">
<div class="block__item">1</div>
</div>
<div class="block__column">
<div class="block__item block__column_2">2
<br>Более высокий блок
</div>
</div>
<div class="block__column block__column_3">
<div class="block__item">3</div>
</div>
</div>
</div>
</div>
</body>
</html>
.wrapper{
height: 100%;
overflow: hidden;
min-height: 100%;
padding: 50px;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
.block__row{
border: 20px solid #ece89d;
margin: 0px 0px 20px 0px;
display: flex;
flex-direction: column;
height: 1024px;
align-items: stretch;
}
.block__column{
border: 20px solid #5e5373;
}
.block__column_1{}
.block__column_2{
flex-grow: 1;
flex-basis: auto;
}
.block__column_3{}
.block__item{
background-color: #18b5a4;
padding: 50px;
font-size: 50px;
color: #fff;
font-weight: 700;
text-align: center;
}
P粉3230507802024-02-04 17:01:18
从 div.block__item 中删除 block__column_2 类并添加到 div.black_column
并为 block__column 添加 display:flex
父元素上的 display: block 属性会阻止 flex-grow 产生效果。
尝试将父级上的 display: block 属性设置为 display: flex。
并添加宽度：100%；到 .block__item
.block__column{ border: 20px solid #5e5373; display: flex; } .block__column_1, .block__column_3{ flex-grow: 0; } .block__column_2{ flex-grow: 1; } .block__item{ background-color: #18b5a4; padding: 50px; font-size: 50px; color: #fff; font-weight: 700; text-align: center; width: 100%; }2
Более высокий блок