gpt4 book ai didi

css - flexbox 包装是否有可能打破最后几个元素的流动?

转载 作者:行者123 更新时间:2023-11-28 09:55:18 26 4
gpt4 key购买 nike

<分区>

2 个问题。看来 flexbox 是对称布局的好工具。但是,当包装元素时,我找不到将最后一项操作为某种“中断行流”的示例,或者将其粘贴到右侧,类似于 justify-content:flex-end;工作或堆叠在一起。

这是 codepen和代码:

body {
display: flex;
flex-wrap: wrap;
}

.full-width {
flex: 100%;
}

.fifty {
flex: 0 0 50%;
}

.one-third {
flex: 0 0 33%;
/*how do we get the second .one-third to stick to the right?*/
}
<div class="full-width">full-width</div>
<div class="fifty">fifty</div>
<div class="fifty">fifty</div>
<div class="one-third">one-third</div>
<div class="one-third">one-third <br/> How do we get this to stick to the right when part of a row?</div>

这是换行的屏幕截图: enter image description here

这是我想要的: enter image description here

我找不到任何类似的问题是,是否可以将一行中的最后两个元素堆叠在一起。

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