[英]Flex-grow is not expanding the child div
我是 css 的新手,我需要帮助解决一个问题。 为什么 flex-grow 不会将 block__column_2 div 扩展到屏幕末尾? 根据课程理论,这应该是预期的行为。 请告知我做错了什么?
代码示例如下所示。 index.html + style.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;
}
从 div.block__item 中删除 block__column_2 类并添加到 div.black_column
并为 block__column 添加 display:flex 父元素上的 display:block 属性阻止 flex-grow 生效。 尝试将父级的 display: block 属性设置为 display: flex。 并添加宽度:100%; 到.block__item
<div class="block__column block__column_2">
<div class="block__item">2
<br>Более высокий блок
</div>
</div>
.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%;
}
如果我理解正确,那是因为填充。 尝试在包装器中将其移除,以便它到达视口的末端。 如果你删除它,它是固定的(至少对我来说)。 您还需要重置 CSS(例如使用Meyer's Reset )来重置所有默认浏览器规则。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.