元素自定义顺序折叠的CSS解决方案
提问于 2019-03-01 19:23:32
我有一组div元素，它们需要以一种特定的方式折叠，我不知道如何实现。以下是它看上去没有倒塌的地方：
-------------
| 1 | 2 | 3 |
-------------
| 4 | 5 | 6 |
-------------然后倒下了：
---------
| 2 |
---------
| 1 | 3 |
---------
| 4 | 5 |
---------
| 6 |
---------请注意，元素2保持在顶部，并保持全宽度。
因此，我需要一个非柔性盒和非JS解决方案，这是由于机构的客户需求(浏览器支持问题等)。
底部的部分很简单，但我无法弄清楚某种浮动的情况，或者以其他方式使元素2保持在顶部，让它周围的元素在它下面折叠。我知道我可以将元素2从元素集合中提取出来，并将其绝对定位在父元素中，并在未折叠时将其覆盖到网格中，但在这样的解决方案中，这样或那样的解决方案的定位在一个浏览器或另一个浏览器中总是有点不稳定，而且看起来有点差。
JS并不是完全不可能，但我真的不想这样做，因为我开发的这个特性有很多其他的JS，我不想在那里增加复杂性。我将接受柔性盒的答案，因为我可能能够说服客户，这是解决它的唯一方法。谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-01 19:46:02
这里有一个使用包装柔性盒的解决方案，它使用order属性来获得所需的布局。注意使用order: -1将第二个元素带到顶部。其余的人在摆弄宽度。
见下面的演示：
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper>div {
background: aliceblue;
border: 1px solid blue;
width: 50%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper div:nth-child(2) {
width: 100%;
order: -1;
}
.wrapper div:last-child {
width: 100%;
}
@media screen and (min-width: 768px) {
.wrapper div:nth-child(2) {
order: initial;
}
.wrapper>div {
flex: 1 1 33%;
}
}<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54954922
复制相关文章
腾讯云开发者
