gpt4 book ai didi

css - flex 模型 : second row with width of element of first row

转载 作者:太空宇宙 更新时间:2023-11-04 10:41:27 24 4
gpt4 key购买 nike

我不完全理解 flex 模型。在此示例中,第一行(第一行和第二行)的元素应显示在一行中:第一个元素 200px,第二个元素应具有剩余空间。

	.wrapper {
display: flex;
width: 100%;
}
.first {
width: 200px;
background: red;
}
.second {
flex: 1;
background: blue;
}
<div class="wrapper">
<div class="first">first left</div>
<div class="second">first right</div>
</div>

现在我想添加第三个元素,它应该放在第二个元素的正下方,宽度与第二个元素相同。所以它不应该有 100% 的完整页面,而应该只显示在第二个元素的下方。

<div class="wrapper">
<div class="first">first left</div>
<div class="second">first right</div>
<div class="third">second</div>
</div>

最佳答案

你可以这样做,使用 calc 功能。

.wrapper {
display: flex;
display: -webkit-flex;
width: 100%;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
justify-content: flex-end;
}

.first {
width: 200px;
background: red;
}

.second {
width: calc(100% - 200px);
background: blue;
}

.third {
background: yellow;
width: calc(100% - 200px);
}
<div class="wrapper">
<div class="first">first left</div>
<div class="second">first right</div>
<div class="third">second right</div>
</div>

关于css - flex 模型 : second row with width of element of first row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35767472/

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