gpt4 book ai didi

html - 为什么 flex 元素不填充剩余空间?

转载 作者:太空宇宙 更新时间:2023-11-04 13:05:17 26 4
gpt4 key购买 nike

<分区>

我正在尝试使用 flexbox 对齐元素

jsFiddle:https://jsfiddle.net/x6m7qnyp/

.container {
display: flex;
flex-wrap: wrap;
}

.left {
flex: 15%;
background-color: rgb(255, 0, 0);
height: 150px;
}

.rightTop {
flex: 85%;
background-color: rgb(0, 255, 0);
align-self: flex-start;
}

.rightBottom {
flex: 85%;
background-color: rgb(0, 0, 255);
}
<div class="container">
<div class="left">
LEFT
</div>
<div class="rightTop">RIGHT TOP</div>
<div class="rightBottom">RIGHT BOTTOM</div>
</div>

如您所见,即使我将 flex 设置为 85%,最后一个元素仍位于 .left div 下方。

我想要的是让右下元素填充右上元素下的剩余空间。它应该看起来像这样:

enter image description here

我知道我可以通过用容器包裹右上角和右下角的元素来实现这一点,但我想知道是否有办法用当前的标记来做到这一点。另外,你能解释一下为什么右下角的元素会下降而不是填充剩余空间吗?

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com