考虑到项目的宽度已知,可以使用
order
和媒体查询,而不是
row
reverse-row
,除非每行都有一个包装器,这在您的情况下是不可能的。
堆栈代码段
body {margin: 0}
.flexbox-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 380px;
height: 100px;
background: red;
margin: 5px;
font-family: sans-serif;
color: white;
text-align: center;
font-size: 2em;
line-height: 150%;
}
@media (min-width: 796px) {
.flex-item:nth-child(3) { order: 2; }
.flex-item:nth-child(4) { order: 1; }
.flex-item:nth-child(n+5) { order: 2; }
.flex-item:nth-child(7) { order: 4; }
.flex-item:nth-child(8) { order: 3; }
}
@media (min-width: 1176px) {
.flex-item:nth-child(3) { order: 0; }
.flex-item:nth-child(4) { order: 3; }
.flex-item:nth-child(5) { order: 2; }
.flex-item:nth-child(6) { order: 1; }
.flex-item:nth-child(n+7) { order: 3; }
.flex-item:nth-child(8) { order: 3; }
}
@media (min-width: 1556px) {
.flex-item:nth-child(3) { order: 0; }
.flex-item:nth-child(4) { order: 0; }
.flex-item:nth-child(5) { order: 4; }
.flex-item:nth-child(6) { order: 3; }
.flex-item:nth-child(7) { order: 2; }
.flex-item:nth-child(8) { order: 1; }
}
<div class="flexbox-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
如果项目的大小未知,那么这里有一个jQuery版本。
注意,分配
顺序
Codepen demo
堆栈代码段
(function ($) {
// preload object array to gain performance
var $items = $('.flexbox-container .flex-item');
// run at resize
$( window ).resize(function() {
$.fn.setOrder(false,0);
});
$.fn.setOrder = function(reverse,idx) {
var $order = [];
$items.each(function(i, obj) {
// did top value changed
if (i != 0 && $items.eq(i - 1).offset().top != $(obj).offset().top) {
reverse = !reverse;
// insert index when reverse
idx = i;
}
if (reverse) {
$order.splice(idx, 0, i);
} else {
$order.push(i);
}
});
// set item's order
$items.css('order', function(i, val) {
return $order[i];
});
}
// run at load
$.fn.setOrder(false,0);
}(jQuery));
.flexbox-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 200px;
height: 100px;
background: red;
margin: 5px;
font-family: sans-serif;
color: white;
text-align: center;
font-size: 2em;
line-height: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexbox-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>