CSS解决元素自定义顺序折叠问题

Posted 2023-03-07

【中文标题】CSS解决元素自定义顺序折叠问题

【英文标题】：CSS Solution to custom order collapse of elements

【发布时间】：2019-07-24 02:15:10

【问题描述】：

我有一组需要以特定方式折叠的 div 元素，但我不知道该怎么做。这是未折叠的样子：

-------------
| 1 | 2 | 3 |
-------------
| 4 | 5 | 6 |
-------------

然后崩溃了：

---------
|   2   |
---------
| 1 | 3 |
---------
| 4 | 5 |
---------
|   6   |
---------

请注意，元素 2 保持在顶部并全角显示。

因此，由于客户的制度要求（浏览器支持问题等），我需要一个非 flexbox 和非 JS 的解决方案。

底部很简单，但我无法弄清楚某种浮动情况或以其他方式使元素 2 停留在顶部并使其周围的元素在其下方塌陷。我知道我可以将元素 2 从元素集合中拉出并将其绝对定位在父元素中，并在未折叠时将其覆盖到网格中，但是在这样的解决方案中的定位在一个浏览器或另一个浏览器中总是有点不稳定，看起来有点不对劲。

JS 并非完全不可能，但我真的不想这样做，因为我正在开发许多与此功能相关的其他 JS，我不想在那里增加复杂性。我会接受 flexbox 的答案，因为我可以让客户相信这是解决它的唯一方法。谢谢！

【问题讨论】：

使用 css position: absolute, left, top 样式到第二个 div，使其不流畅。

您无法检测 CSS 中元素的 wrapping...对于 flexbox 解决方案，您也必须使用 媒体查询以两种布局为目标...

@kukkuz 我没有检测到，这将全部基于媒体查询。

@ganeshphirke 我想这可行，但它需要在流入元素上设置预定的高度偏移，这有点混乱，因为元素 2 的高度可能会根据 CMS 输出动态变化，但我知道可能这里不是简单的解决方案。

【参考方案1】：

这是一个使用 wrapping flexbox 的解决方案，它使用 order 属性来获得所需的布局。请注意使用order: -1 将第二个元素置于顶部。剩下的就是摆弄 width。

请看下面的演示：

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>

【讨论】：

我会给它一个半小时，但我想我会选择这个答案。我 grepped 了应用程序的 CSS 资产，看起来客户端已经在一些活动的 CSS 模块中使用了 flexbox，所以我想我可以摆脱这个。