[英]Content not filling entire height of flexbox
我在为 Angular 应用程序制作 header 时遇到问题。 现在 header 中的内容没有填满容器的整个高度。 我希望 header 正好是 45vh。 内容如何填满整个宽度?
HTML
<div class="main">
<div class="left">
<div class="text">
<h3 class="subtitle">over 5 categories</h3>
<h1 class="title">Best Deals on HandOff</h1>
</div>
<div class="image">
<img src="../../../assets/girl_laptop.png" />
</div>
</div>
<div class="right"></div>
</div>
SCSS
.main{
margin:auto;
margin-bottom: 5vh;
width: 85%;
display: flex;
background-color: green($color: #000000);
margin-top: 3vh;
height: 45vh;
.left{
width: 60%;
display: flex;
height: 100%;
margin-right: 4vw;
border-radius: 8px;
background-color: rgb(233, 231, 224);
.title{
font-size: 4rem;
color: white;
}
.text{
height: 100%;
}
}
.right{
width: 30%;
}
}
[![这是你的 flex 容器的样子][1]][1]
这是您的弹性容器现在的样子(我不得不使用不同的图像):[1]: https://i.stack.imgur.com/z4dDl.png
由于大标题展开,图像无法变宽(因此变高)。 您需要在图像和文本上设置flex-basis
来决定您希望每一个有多大。 有关 flex-basis 的更多信息: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis 。
您可能还想在左侧 flex 容器上设置align-items
或其他东西以使图像和文本居中,但这只是猜测,不知道您希望设计看起来像什么。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.