我有一个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>
编辑我只对左下角感兴趣,所以任何一种技巧都可以。
如果您使用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>
它不是最好的解决方案,它可以为您提供升级的基础(比如在等式中添加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>