Flexbox：包装元素而不嵌套

Posted 2023-03-07

【中文标题】Flexbox：包装元素而不嵌套

【英文标题】：Flexbox: Wrapping an element without nesting

【发布时间】：2017-03-31 20:58:32

【问题描述】：

我有一个 flexbox 布局，它在移动设备上遵循一定的顺序，应该在桌面/平板电脑上重新排序。所有元素都被放入一个能够重新排序的包装器中。

手机端顺序如下： 除了第一 -> 图片 1 内容 除了第一 -> 图片 2 除了第二 -> 图 3

我希望在桌面上拥有： 除了第一 -> 图片 1 -> 图片 2 内容 除了第二 -> 图 3

所以桌面上的问题是第二个图像应该包裹在第一个图像之下。此处无法进行嵌套，因为它会在移动设备上抛出所需的顺序。

<div class="wrapper">

  <div class="left-first">
    <img src="http://lorempixel.com/g/200/200/">
  </div>

  <div class="content">
    [ ... ]
  </div>

  <div class="left-second">
    <img src="http://lorempixel.com/g/300/300/">
  </div>

  <div class="right">
    <img src="http://lorempixel.com/g/250/250/">
  </div>
</div>

让我用这个小提琴来说明问题： https://jsfiddle.net/wd8obb0k/

非常感谢您的帮助！

【问题讨论】：

使用media queries

媒体查询本身不是问题，谢谢，这是我在 jsfiddle 上展示的包装问题

Flexbox 不能这样工作。有关解释和替代方案，请参阅副本。

@Michael_B 我相信链接为 dup 问题和这个问题之间存在差异。在另一个问题中，使用 col-wrap 是可以的，因为 2 个宽度是相同的。在这个问题中，情况并非如此。

col-wrap 是另一种选择。关键是弹性项目不能包裹在同一行的其他项目之下。项目必须换行到新行。

【参考方案1】：

这是 flex 无法实现的请求。

但是你的案子可以用一点小技巧来处理。

我已经为您的左第二项添加了一些属性，这依赖于 flex 基础是固定的并且图像是正方形的事实：

.wrapper 
  display: flex;
  flex-flow: row wrap;
  background-color: pink;

img 
  width: 100%

.content 
  flex: 1 0 60%

.left-first,
.left-second,
.right 
  flex: 0 0 20%;

.left-first 
  order: 0;

.left-second 
  order: 1;
  margin-left: -20%;
  margin-bottom: 20%;
  transform: rotate(-90deg) translateX(-100%) rotate(90deg);

.content 
  order: 2

.right 
  order: 3

<div class="wrapper">

  <div class="left-first">
    <img src="http://lorempixel.com/g/200/200/">
  </div>

  <div class="content">
    <h3>H3 - Lorem ipsum Incididunt magna nostrud sint.</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <h3>H4 - Lorem ipsum Ad labore laborum.</h3>
    <p>
      Lorem ipsum Sit proident laboris id eu in Ut non laboris id mollit ut elit dolor velit est nisi magna adipisicing culpa et mollit do do tempor enim exercitation.
    </p>
    <h3>H4 - Lorem ipsum Ad labore laborum.</h3>
    <p>
      Lorem ipsum Sit proident laboris id eu in Ut non laboris id mollit ut elit dolor velit est nisi magna adipisicing culpa et mollit do do tempor enim exercitation.
    </p>
  </div>


  <div class="left-second">
    <img src="http://lorempixel.com/g/300/300/">
  </div>

  <div class="right">
    <img src="http://lorempixel.com/g/250/250/">
  </div>
</div>

【讨论】：

这个技巧很酷，确实适用于方形图像。虽然我的例子当然是一个抽象的例子。在现实世界中，内容不仅仅是图像，高度也是未知的。再次感谢您的调查！我选择了一个 nasty js 解决方法。