外部元件破坏流动

Question

我有一个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一起使用，则可以获取配置，但不能获取 order 元素。

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

.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>

Answer 2

这不是最佳解决方案，它可以为您提供升级基础（例如在方程式中添加ajax）。希望这对您有用！

var element = document.getElementsByClassName('box')[0];
var rect = element.getBoundingClientRect();
x = rect.left;
w = rect.width;
var xa = document.getElementsByClassName('inbox');
var k = Array.from(xa).slice(-1).pop();
var rect2 = k.getBoundingClientRect();
x2 = rect2.left;
if(x+w > x2){
console.log(x + w , x2)
 k.style.left =+ (x) +"px";
}

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

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

.inbox {
  position:relative;
  width: 50px;
  height: 50px;
  margin: 5px;
  background: purple;
  color: #fff;
}

.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>