Zebra rozkładająca stół flexbox z elementami do pakowania

Question

Szukam najprostszego sposobu zebrania pasków w rzędy na następującym elastycznym stole Flexbox.

Innymi słowy, wiersze 2 i 4 w tym przykładzie, ale bez ograniczeń, nie mogę wiedzieć, ile będzie tam wierszy, ponieważ jest to element wielokrotnego użytku w systemie CMS.

Kod HTML nie może się zmienić, ale liczba wierszy i kolumn często się zmienia. Cieszę się z ustawiania limitu kolumn, ale nie wierszy.

Czy można to zrobić w czystym 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>

Answer 1

Najlepiej, aby wybrany selektor był ukierunkowany na wartości równomierne zawarte w atrybucie style. Coś takiego:

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

Zasadniczo, to selektor fantazji mówi: cel wszystkie div ze stylem atrybut zawiera (*) Wartości „porządek” i parzystą liczbę.

To może być uproszczona tylko:

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

Ale ten rodzaj magii CSS nie istnieje, o ile mi wiadomo. (CSS Selectors 3 complete list)

oferuje ulepszoną wersję :nth-child() pseudo-class, która może być w stanie wykonać takie paski zebry. Ale to nie jest gotowe na najlepszy czas.

Na razie, powiedziałbym najprostszą metodę CSS dla osiągnięcia swojego celu ...

szukam najprostszej drodze do wierszy Zebra rozłożony w następujący reagującego tabeli schematu flexbox.

... byłoby dodać klasę do każdego elementu z parzystą order wartości.

I z niewielkim dopasowaniem do zapytania o media, paski zebry działają na różnych rozmiarach ekranu.

.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

Answer 2

Gdybym Ci rację, a to znaczy, że chce wierszy zebra naszywka z numerem 2, 4, ...

zebra dla pasemka liczby rzędowym dwie trzeba zmienić kolor tła 2, 5, 7, ... , więc odpowiedź byłaby Rtable > div:nth-child(5n + 2) { background-color: #ccc; }. dla czwartego rzędu formuła byłaby nth-child(5n + 4) i tak dalej.

W przypadkach, w których chcesz powtórzyć proces do nieograniczonej liczby, musisz użyć preprocesora takiego jak SASS lub użyć JAVASCRIPT. W przeciwnym razie jedyną opcją w css jest dokładne określenie, które wiersze muszą być rozłożone.

Answer 3

Ty nie określił to musiał skalować do nieskończonych kolumn, tylko nieskończonych rzędów, więc można 4 przepisy dla każdej kolumny, aby wybrać każdą drugą komórkę, czyli :

             
  
 
   
 
    
/* 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; 
 
    }
 
   
 
  
 
 

 

Jeśli używasz preprocesora takiego jak LESS, możesz zrobić to mixin:

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