Flexbox:根据行数交替“行”和“行反向”
Posted
技术标签:
【中文标题】Flexbox:根据行数交替“行”和“行反向”【英文标题】:Flexbox: Alternate "row" and "row-reverse" according to row's number 【发布时间】:2018-04-15 22:51:40 【问题描述】:我正在尝试使用 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>
【问题讨论】:
【参考方案1】:鉴于项目具有已知宽度,这可以使用order
和媒体查询来完成,而不是使用row
/reverse-row
,除非每一行都有一个包装器,这在您的案例。
堆栈sn-p
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
的值需要一次性完成,否则它不起作用,好像一次开始更改一项的值,该更改将立即执行并且会影响下一个项目的位置。
Codepen demo
堆栈sn-p
(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>
【讨论】:
非常简单,非常感谢。提示和演示对我帮助很大,我不知道如何更感谢你!【参考方案2】:我看到这种情况发生的唯一方法是手动设置顺序,然后使用媒体查询作为断点 - 这是一个示例
.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>
【讨论】:
一团糟!但是你给了我一个在 Javascript 中泛化的好主意 是的,无论是 js 还是 sass 都会把它整理好以上是关于Flexbox:根据行数交替“行”和“行反向”的主要内容,如果未能解决你的问题,请参考以下文章
如何获取 javascript 中用于 flexbox 和网格布局的行数和列数?