style only first item in each flexbox row

Question

I have a horizontal, wrapping flexbox, like so:

.container {
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
}

The number of items per row will vary depending on the screen width, and the width of each item will vary as well.

I would like to add styling to only the first item of each flexbox row. Below is an illustration of what I'm looking for.

Example 1
|--------|--------|--------|
|style me|        |        |
|--------|--------|--------|
|style me|        |        |
|--------|--------|--------|
|style me|        |
|--------|--------|

Example 2
|--------|---|-----|------------|
|style me|   |     |            |
|--------|---|-----|------------|
|  style me     |      |        |
|---------------|------|--------|
| style me |      |
|----------|------|

How can I do this using Flexbox?

I still need the rows to wrap as the screen is resized, so I don't think I can use Grid. However, if it is possible to use Grid to solve this problem, that would be a good solution for me as well.

Update

This can be accomplished using CSS Grid and either the auto-fill or auto-fit values. See this question for details:

CSS grid wrapping

@AndyHoffman Updated the question to clarify that the number of items per row is variable, depending on the view width. — dwhieb, Mar 09 '19 at 02:13
So, couldn't you set different rules per @media query and adjust the `nth-child` logic in my answer per context? — Andy Hoffman, Mar 09 '19 at 02:15
@AndyHoffman The width of the individual flex items also varies. To the best of my knowledge, I don't know a way to determine how many items will be in a row (without JavaScript at least, which I'd like to avoid here). — dwhieb, Mar 09 '19 at 02:17
In 2019, there's no way pure `CSS` way to determine when a new row is implicitly created by the existence of some variable amount of content. — Andy Hoffman, Mar 09 '19 at 02:20
A grid answer, but applies to flex columns, as well: https://stackoverflow.com/q/46308048/3597276 — Michael Benjamin, Mar 09 '19 at 02:23
@Michael_B OP does not know where each line break will happen, because content is variable. Therefore, how is this linked answer helpful here? — Andy Hoffman, Mar 09 '19 at 02:25
By pointing out that CSS cannot target columns or rows. The OP is trying to target all flex items in the first column. @AndyHoffman — Michael Benjamin, Mar 09 '19 at 02:26

score 6 · Accepted Answer · answered Mar 10 '19 at 14:41

As @AndyHoffman already mentioned in the comments, (as of March 2019) it is impossible to do it with pure css. If you tolerate a bit of javascript, then you could iterate over all the flex children and see if their position indicates that they are in the first column and apply styling accordingly. A rudimentary example is shown in the snippet below:

function highlightFirst(){
  let flexChildren = document.querySelectorAll('.content');
  let leftPosition = flexChildren[0].offsetLeft;
  for(let flexChild of flexChildren){
    if(flexChild.offsetLeft <= leftPosition){
      flexChild.classList.add('firstColumn');
    }else{
      flexChild.classList.remove('firstColumn');
    }
  }
}
window.addEventListener('resize', highlightFirst);
highlightFirst();

* {
  list-style:none;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px black;
}

.content {
  height: 20px;
  background: grey;
  margin: 5px;
}

.firstColumn {
  border: 2px dashed red;
}

<ul class="wrapper">
    <li class="content" style="width:  14px;">1</li>
    <li class="content" style="width:  77px;">2</li>
    <li class="content" style="width:  41px;">3</li>
    <li class="content" style="width:  94px;">4</li>
    <li class="content" style="width:  76px;">5</li>
    <li class="content" style="width:  61px;">6</li>
    <li class="content" style="width:  81px;">7</li>
    <li class="content" style="width:  70px;">8</li>
    <li class="content" style="width:  22px;">9</li>
    <li class="content" style="width:  29px;">10</li>
    <li class="content" style="width:  27px;">11</li>
    <li class="content" style="width:  22px;">12</li>
    <li class="content" style="width:  56px;">13</li>
    <li class="content" style="width:  32px;">14</li>
    <li class="content" style="width:  55px;">15</li>
    <li class="content" style="width:  34px;">16</li>
    <li class="content" style="width:  75px;">17</li>
    <li class="content" style="width:  97px;">18</li>
    <li class="content" style="width:  25px;">19</li>
    <li class="content" style="width:  48px;">20</li>
</ul>

The example is really basic and rudimentary just to show a working principle, but in order to be usable in real-world scenarios it should be extended to circumvent the following shortcomings:

The javascript is run only on start and on window resize - it would be best to use a resizeObserver on the parent .wrapper, but the support is really poor.
It does not detect size changes of the content of each flex child
Only left to right direction is assumed
Exact left margin of all items is assumed (so that the first column always has the left edge aligned)
It uses hard-coded class names
Due to used ES6 language features, it might need transpiling or rewriting to support older browsers (it that is required)

score 1 · Answer 2 · answered Mar 04 '22 at 16:18

Although the answer of Piotr is very thorough, the example does not account for justify-content: center; on the flexbox. This small adaptation of Piotr's example that fixes that issue:

function highlightFirst() {
  let flexChildren = document.querySelectorAll('.content');
  let previousOffset = 0;
  for (let flexChild of flexChildren) {
    if (flexChild.offsetTop > previousOffset) {
      previousOffset = child.offsetTop;
      flexChild.classList.add('firstColumn');
    } else {
      flexChild.classList.remove('firstColumn');
    }
  }
}
window.addEventListener('resize', highlightFirst);
highlightFirst();

style only first item in each flexbox row

Update

2 Answers2

Linked