我正在尝试使用Flexbox创建响应式布局,这样我就可以将方向row
和row-reverse
交替使用。
也许你可以通过一些图片更好地理解它(注意方框的顺序):
调整大小:
或者仍然:
你可以想象一个穿过每个盒子的箭头,它必须能够按照数字序列(如蛇)经过1到8个。
如何使用flexbox实现它?
我想我可以使用order
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>
&#13;
答案 0 :(得分:3)
我能看到这种情况的唯一方法是手动设置顺序,然后使用媒体查询断点 - 这是一个例子
.flexbox-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: calc(50% - 10px);
height: 100px;
background: red;
margin: 5px;
font-family: sans-serif;
color: white;
text-align: center;
font-size: 2em;
line-height: 150%;
}
.flex-item:nth-child(1) {
order: 1;
}
.flex-item:nth-child(2) {
order: 2;
}
.flex-item:nth-child(3) {
order: 4;
}
.flex-item:nth-child(4) {
order: 3;
}
.flex-item:nth-child(5) {
order: 5;
}
.flex-item:nth-child(6) {
order: 6;
}
.flex-item:nth-child(7) {
order: 8;
}
.flex-item:nth-child(8) {
order: 7;
}
@media only screen and (max-width: 768px) {
.flex-item {
width: calc(33.33333% - 10px);
}
.flex-item:nth-child(1) {
order: 1;
}
.flex-item:nth-child(2) {
order: 2;
}
.flex-item:nth-child(3) {
order: 3;
}
.flex-item:nth-child(4) {
order: 6;
}
.flex-item:nth-child(5) {
order: 5;
}
.flex-item:nth-child(6) {
order: 4;
}
.flex-item:nth-child(7) {
order: 7;
}
.flex-item:nth-child(8) {
order: 8;
}
<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>
答案 1 :(得分:2)
鉴于项目具有已知宽度的事实,可以使用order
和媒体查询来完成,而不是使用row
/ reverse-row
,除非每行都有一个包装,赢了在你的情况下是不可能的。
Stack snippet
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版本。
注意,分配order
值需要一次完成,否则它将无法工作,就像一次开始更改一个项目的值一样,该更改将被执行立即并将影响下一个项目的位置。
Stack snippet
(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>