0

I am using media queries and flex layout to display my items in a container.

It can be 1 column display or 2 columns or 3 columns or 4 columns or 5 columns or 6 columns depending on the screen size.

For example:

<div class="containter">
   <item>item1<item>
   <item>item2<item>
   <item>item3<item>
   <item>item4<item>
   <item>item5<item>
</div>

If the display is 2 columns, I would like to target only 

<item>item5<item>

And if,

<div class="containter">
   <item>item1<item>
   <item>item2<item>
   <item>item3<item>
   <item>item4<item>
   <item>item5<item>
   <item>item6<item>
</div>

If the display is 2 columns, I would like to target both 

<item>item5<item> 
<item>item6<item>

If the display is 3 columns, I would like to target 3 items 

<item>item4<item>
<item>item5<item> 
<item>item6<item>

Is there a CSS selector to target items in the last row?

I was hoping to find the first item in the last row and then find siblings using ~ selector, but cant seem to get one working.

Update: ** Not a duplicate of Targeting flex items on the last row since this link doesn't provide any solution. I am looking for some solution.

Community
  • 1
  • 1
user3701057
  • 395
  • 1
  • 6
  • 22
  • Are these going to be a set amount of items or are they going to be dynamically added? – Steve K Apr 13 '17 at 19:30
  • These items are dynamically added. I do not know the count of total items upfront. – user3701057 Apr 13 '17 at 19:33
  • Why is my question marked as duplicate and why other comments have been removed? – user3701057 Apr 13 '17 at 20:44
  • I am really looking for some solution and not able to remove [Duplicate] from the title. Please look at the update and remove the tag [Duplicate] – user3701057 Apr 13 '17 at 20:49
  • As indicated in the duplicate, the current iteration of flexbox provides no solution to this problem. Even CSS in general has no clean solution. But the answer in the duplicate provides a long list of posts identical or nearly identical to yours. Many contain hacks that may work for you. – Michael Benjamin Apr 14 '17 at 02:14

0 Answers0