斑马条纹行在柔性包装柔性包装：包装 [英] zebra striping rows in a flex container with flex-wrap:wrap
问题描述
假设我在 flex-direction：row 和 flex-wrap：wrap 中使用了一个flexbox容器。 。
根据浏览器窗口的大小，我可能在每一行有2,3,4或更多项目。
我想在每隔一行的项目中放一个灰色背景，模仿一个表格布局。有没有一个简单的方法来做到这一点？
这里的示例小提琴： https://jsfiddle.net/mqf7nouc/1/
HTML：
< div class =container>
< div class =item>
item 1
< / div>
< div class =item>
item 2
< / div>
< div class =item>
item 3
< / div>
< div class =item>
item 4
< / div>
< div class =item>
项目5
< / div>
< div class =item>
item 6
< / div>
< div class =item>
项目7
< / div>
< / div>
CSS：
.container {
display：flex;
flex-direction：row;
flex-wrap：wrap;
}
.item {
height：50px;
width：100px;
text-align：center;
vertical-align：middle;
line-height：50px;
border：1px纯黑色;
保证金：5px;
好的，这实际上是一个柔性盒相当困难的任务。我可以想出最好的方法是使用JavaScript来找出包装正在发生的地方，通过循环和比较项目的高度。目前，它是一个自我执行的功能，只能运行在窗口加载。如果您希望在加载后更改浏览器大小时使其具有响应性，请将其放入函数中并在调整窗口大小时调用该函数。
否则这里就是一切。
（function（）{
var x = 0;
var counter = 0;
var boxPerRow = 0;
var elements = document.getElementsByClassName（item）;
var totalBoxes = elements.length;
//找出每行有多少个盒子
for（var i = 0; i< totalBoxes-2; i ++）{
x = i + 1;
var temp = elements [i] .getBoundingClientRect（）;
if x< = elements.length）
{
var next = elements [x] .getBoundingClientRect（）;
//比较当前高度与下一个框的高度
if（next .top> temp.top&& amp;& amp; counter == 0）
{
boxesPerRow = x;
counter = 1;
}
}
}
// var marker是我们应用样式的地方
// var countUpTo是最后一个框在我们正在造型
const boxes = boxesPerRow;
var countUpTo = boxesPerRow;
var counter = 0;
//循环并将颜色应用于框。
for（var marker = 0; marker< totalBoxes; marker ++）
{
if（marker< countUpTo）
{
elements [marker] .style。 backgroundColor =red;
}
else
{
counter ++;
if（counter === 1）
{
countUpTo = boxes *（counter + 2）;
}
else {
countUpTo = countUpTo +（boxes * 2）;
}
marker = marker + boxes-1;
//处理按钮行不是一整套框。
if（marker> totalBoxes&&！（marker> totalBoxes-（boxes * 2）））
{
var leftOver = marker-totalBoxes; （var c = 1; c <= leftOver; c ++）
{
elements [（totalBoxes-c）]。style.backgroundColor =红;
}
}
}
}
}）（）;
Let's say I'm using a flexbox container with flex-direction:row and flex-wrap:wrap.
Depending on the size of the browser window, I might have 2, 3, 4 or more items in each row.
I want to put a grey background in the items in every other row, mimicking a table layout. Is there an easy way to do this?
Example fiddle here: https://jsfiddle.net/mqf7nouc/1/
HTML:
<div class="container">
<div class="item">
item 1
</div>
<div class="item">
item 2
</div>
<div class="item">
item 3
</div>
<div class="item">
item 4
</div>
<div class="item">
item 5
</div>
<div class="item">
item 6
</div>
<div class="item">
item 7
</div>
</div>
CSS:
.container {
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.item {
height:50px;
width:100px;
text-align:center;
vertical-align:middle;
line-height:50px;
border:1px solid black;
margin:5px;
}
Okay, this is actually a fairly difficult task with flexboxes. The best way I could come up with is to use javascript to find out where the wrapping is happening by looping through and comparing the heights of the items. Currently, it is in a self-executing function and will only run on window load. If you want it to be responsive when someone changes a browser size after load then put it inside of a function and call that function on window resize.
Otherwise here is everything.
(function() {
var x = 0;
var counter = 0;
var boxesPerRow = 0;
var elements = document.getElementsByClassName("item");
var totalBoxes = elements.length;
// Loop to find out how many boxes per row
for (var i = 0; i < totalBoxes-2; i++){
x = i+1;
var temp = elements[i].getBoundingClientRect();
if (x <= elements.length)
{
var next = elements[x].getBoundingClientRect();
// Compare height of current vs the next box
if (next.top > temp.top && counter ==0)
{
boxesPerRow = x;
counter = 1;
}
}
}
// var marker is where we are applying style
// var countUpTo is the last box in the row we are styling
const boxes = boxesPerRow;
var countUpTo = boxesPerRow;
var counter = 0;
// Loop through and apply color to boxes.
for(var marker = 0; marker < totalBoxes; marker++)
{
if(marker < countUpTo)
{
elements[marker].style.backgroundColor = "red";
}
else
{
counter++;
if(counter === 1)
{
countUpTo = boxes*(counter+2);
}
else{
countUpTo = countUpTo + (boxes*2);
}
marker = marker+boxes-1;
// Handles buttom row not being a full set of boxes.
if(marker> totalBoxes && !(marker > totalBoxes-(boxes*2)))
{
var leftOver = marker-totalBoxes;
for(var c = 1; c <= leftOver; c++)
{
elements[(totalBoxes-c)].style.backgroundColor = "red";
}
}
}
}
})();
这篇关于斑马条纹行在柔性包装柔性包装：包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
