Zebra 使用包装项目对 flexbox 表进行条带化

Posted 2023-03-06

【中文标题】Zebra 使用包装项目对 flexbox 表进行条带化

【英文标题】：Zebra striping a flexbox table with wrapping items

【发布时间】：2016-05-23 04:03:18

【问题描述】：

我正在寻找最简单的方法来对以下响应式 flexbox 表上的行进行斑马条纹处理。

换句话说，本例中的第 2 行和第 4 行，但不受限制，我不知道会有多少行，因为这是用于 CMS 系统中的可重用组件。

html 不能更改，但行数和列数会经常更改。我很高兴对列而不是行设置限制。

有没有办法在纯 CSS 中做到这一点？

.Rtable 
  display: flex;
  flex-wrap: wrap;


.Rtable-cell 
  box-sizing: border-box;
  flex: 33.33%;
  margin: -1px 0 0 -1px;
  padding: 5px 10px;
  border: solid 1px slategrey;


h3  margin: 0; 

@media all and (max-width: 500px) 
  .Rtable 
    display: block;
  

<div class="Rtable">

  <div style="order:1;" class="Rtable-cell"><h3>Eddard Stark</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a sword named Ice</div>
  <div style="order:3;" class="Rtable-cell">No direwolf</div>
  <div style="order:4;" class="Rtable-cell">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Lord of Winterfell</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Jon Snow</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a sword named Longclaw</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Ghost</div>
  <div style="order:4;" class="Rtable-cell">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Knows nothing</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Arya Stark</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a sword named Needle</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Nymeria</div>
  <div style="order:4;" class="Rtable-cell">Female</div>
  <div style="order:5;" class="Rtable-cell"><strong>No one</strong></div>

</div>

【问题讨论】：

我们能否澄清一下： 1. 你真的是说列数会改变吗？您的数据似乎有规律。 2. 为什么不能用桌子？与流行的看法相反，表格也可以是响应式的。 3.你意识到如果所有的子元素都具有相同的类，你可以不用类而使用诸如.Rtable>div之类的选择器？

【参考方案1】：

理想情况下，您想要的选择器将针对包含在style 属性中的偶数值。像这样的：

.Rtable > div[style*="order"][style*=even]  ... 

基本上，这个幻想选择器说：定位所有具有样式属性的 div，该属性包含 (*) 值“order”和偶数。 p>

可以简化为：

.Rtable > div[style*=even]  ... 

但据我所知，这种 CSS 魔法并不存在。 (CSS Selectors 3 complete list)

Selectors 4 提供了一个增强的:nth-child() pseudo-class，它可能能够完成这样的斑马条纹。但这还没有准备好迎接黄金时段。

现在，我会说实现目标的最简单的 CSS 方法...

我正在寻找在以下响应式 flexbox 表中对行进行斑马条纹的最简单方法。

... 将是为每个元素添加一个类，具有偶数order 值。

对您的媒体查询稍作调整后，斑马条纹适用于不同的屏幕尺寸。

.Rtable 
  display: flex;
  flex-wrap: wrap;


.Rtable-cell 
  box-sizing: border-box;
  flex: 33.33%;
  margin: -1px 0 0 -1px;
  padding: 5px 10px;
  border: solid 1px slategrey;


h3  margin: 0; 

/* NEW */
.stripe  
  background-color: black;
  color: white;


/* ADJUSTED */
@media all and (max-width: 500px) 
  .Rtable   display: block; 
  .stripe  background-color: white; color: black; 
  .Rtable-cell:nth-child(even)  background-color: black; color: white;

<div class="Rtable">

  <div style="order:1;" class="Rtable-cell"><h3>Eddard Stark</h3></div>
  <div style="order:2;" class="Rtable-cell stripe">Has a sword named Ice</div>
  <div style="order:3;" class="Rtable-cell">No direwolf</div>
  <div style="order:4;" class="Rtable-cell stripe">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Lord of Winterfell</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Jon Snow</h3></div>
  <div style="order:2;" class="Rtable-cell stripe">Has a sword named Longclaw</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Ghost</div>
  <div style="order:4;" class="Rtable-cell stripe">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Knows nothing</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Arya Stark</h3></div>
  <div style="order:2;" class="Rtable-cell stripe">Has a sword named Needle</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Nymeria</div>
  <div style="order:4;" class="Rtable-cell stripe">Female</div>
  <div style="order:5;" class="Rtable-cell"><strong>No one</strong></div>

</div>

JSFIDDLE DEMO

【讨论】：

我需要条带出现在所有屏幕尺寸上

我的答案中的条纹出现在所有屏幕尺寸上。

哦，好吧，我知道你在那里做了什么。是的，使用类手动条带化是一种可能的解决方案，但如果稍后插入行可能会变得混乱。我想您必须在每次更改时重新应用条带化。

@davidelrizzo，无需重新应用条带化。而且一点也不凌乱。只有偶数的 order 值才能获得条纹。所以你可以有一个规则，每次div 获得偶数order 值，它也获得.stripe 类。

这是一个好点。当表格为水平格式时，这也适用。我认为你在这里提供了最好的解决方案。看起来 nth-child 不能像我正在寻找的那样在图案中条纹。

【参考方案2】：

您没有指定它必须针对无限列进行缩放，只有无限行，因此您可以为每列设置 4 个规则来选择每个第二个单元格，即：

    /* 4(columns)*2(every second cell) = 8n */
    /* then repeat for each column (+1, +2 etc) */
    .Rtable-cell:nth-child(8n+1) 
        background-color: pink;
        
    .Rtable-cell:nth-child(8n+2) 
        background-color: pink;
        
    .Rtable-cell:nth-child(8n+3) 
        background-color: pink;
        
    .Rtable-cell:nth-child(8n+4) 
        background-color: pink;
        

如果您使用的是 LESS 之类的预处理器，则可以将其设为 mixin：

    /*
    .mxn-TableStripes(@n, @i: 1) when (@i =< @n) 
      @second-row: @n*2;
      @sel: ~"@second-rown + @i";
      .Rtable-cell:nth-child(@sel) 
        background-color: pink;
      
      .mxn-TableStripes(@n, (@i + 1));
    
    //Param is number of columns
    .mxn-TableStripes(4);
    */

【讨论】：

我需要对行而不是列进行条带化。此方法不适用于行，因为我无法提前知道行数，而且可能很大。

【参考方案3】：

如果我猜对了，你的意思是你想在数字 2、4、...上用斑马线划行

对于第二行斑马条纹，您必须更改背景颜色 2、5、7、... 所以答案是Rtable > div:nth-child(5n + 2) background-color: #ccc; 。对于第 4 行，公式为 nth-child(5n + 4) 等等。

如果你想无限地重复这个过程，你必须使用像 SASS 这样的预处理器或使用 javascript。否则，css 中的唯一选择就是准确地知道哪些行必须被条带化。

【讨论】：

你是正确的 nth-child(5n + 2) 将条纹一个奇数行.. 但是 CSS 需要提前设置行数，对于可重用组件，我无法知道这一点。此外，它还需要每两行都有一个唯一的 CSS 行。我所追求的是针对任意数量的行的一套解决方案。

使用 CSS 无法做到这一点。 Javascript 会有所帮助。如果你愿意接受 JS 解决方案，我可以提供一个。