html - 用外部元素中断流

Question

我有一个 flexbox，其元素显示如下:

问题是:有没有一种方法可以从 flexbox 外部 中断流，以便被阻塞的元素将移动到下一个位置，例如:

flexbox 是某种排序框，所以我不能在里面放置任何其他元素然后进行排序。通常列的高度相同，但有时我需要第一列短一列。

我试过以各种组合方式制作 flow: left 和 display: inline-block 框，但我无法完成。

.container {
  width: 120px;
  height: 180px;
  margin: 40px 0 0 100px;
}

.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 120px;
  height: 180px;
  background: pink;
}

.inbox {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: purple;
  color: #fff;
  margin-left: auto;
}

.box {
  float: left;
  width: 110px;
  height: 60px;
  margin: -60px 0 0 -60px;
  background: orange;
}

<div class="container">
  <div class="flexbox">
    <div class="inbox"> 1 </div>
    <div class="inbox"> 2 </div>
    <div class="inbox"> 3 </div>
    <div class="inbox"> 4 </div>
    <div class="inbox"> 5 </div>
  </div>
  <div class="box"></div>
</div>

And a fiddle

编辑我只对左下角感兴趣，所以任何技巧都可以。

Answer 1

如果您使用 flex-wrap: wrap-reverse 以及 column-reverse flex direction 和 justify-content: flex -end 您可以获取配置，但不能获取元素的顺序。

请注意，尽管元素的顺序与标记相反 - 请参见下面的演示:

.container {
  width: 120px;
  height: 180px;
  margin: 40px 0 0 100px;
}

.flexbox {
  display: flex;
  flex-direction: column-reverse; /* CHANGED */
  flex-wrap: wrap-reverse; /* CHANGED */
  justify-content: flex-end; /* CHANGED */
  width: 120px;
  height: 180px;
  background: pink;
}

.inbox {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: purple;
  color: #fff;
  margin-left: auto;
}

.box {
  float: left;
  width: 110px;
  height: 60px;
  margin: -60px 0 0 -60px;
  background: orange;
}

<div class="container">
  <div class="flexbox">
    <div class="inbox"> 1 </div>
    <div class="inbox"> 2 </div>
    <div class="inbox"> 3 </div>
    <div class="inbox"> 4 </div>
    <div class="inbox"> 5 </div>
  </div>
  <div class="box"></div>
</div>