我正在尝试使用Flexbox创建响应式布局,这允许我交替方向行和行反向.
也许你可以用一些图像更好地理解它(注意盒子的顺序):
调整大小:
或者仍然:
你可以想象一个穿过每个盒子的箭头,它必须能够按照数字序列(如蛇)经过1到8.
如何使用flexbox实现它?
我想我可以使用订单CSS属性,但我想念一种动态的设置方式.我不认为我可以用JavaScript实现这个结果,因为没有办法获得动态行的数字(除了丑陋的黑客,我想避免它们).所以,你有什么想法吗?
谢谢.
如果你想根据我的代码编写一个例子,你可以使用这个:
.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%;
}
<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>
解决方法:
鉴于项目具有已知宽度的事实,这可以使用订单和媒体查询来完成,而不是使用行/反向行,除非每行都有一个包装器,这在您的情况下是不可能的.
堆栈代码段
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版本.
注意,分配订单值需要一次完成,否则它将无法工作,就好像一次开始更改一个项目的值,该更改将立即执行并将影响下一个项目的位置.
堆栈代码段
(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>