стиль только первый элемент в каждой строке flexbox

Question

У меня есть горизонтальный упаковочный флексбокс, например:

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

Количество элементов в строке будет варьироваться в зависимости от ширины экрана, а также ширина каждого элемента.

Я хотел бы добавить стили только к первому элементу каждой строки flexbox.Ниже приведена иллюстрация того, что я ищу.

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

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

Как я могу сделать это с помощью Flexbox?

Мне все еще нужны строки для переноса при изменении размера экрана, поэтому яне думай Я могу использовать Grid.Однако, если есть возможность использовать Grid для решения этой проблемы, это было бы хорошим решением и для меня.

Answer 1

Как уже упоминалось в комментариях @AndyHoffman (по состоянию на март 2019 г.) это невозможно сделать с помощью чистого CSS.Если вы допускаете немного javascript, то можете перебрать все дочерние элементы flex и посмотреть, указывает ли их позиция, что они находятся в первом столбце, и соответственно применить стилизацию.Примитивный пример показан во фрагменте ниже:

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>

Этот пример является базовым и элементарным только для того, чтобы показать принцип работы, но для того, чтобы его можно было использовать в реальных сценариях, он должен быть расширенчтобы обойти следующие недостатки:

1. Javascript запускается только при запуске и при изменении размера окна - было бы лучше использовать resizeObserver на родительском .wrapper, ноподдержка очень плохая .
2. Он не обнаруживает изменения размера содержимого каждого дочернего элемента flex
3. Предполагается только направление слева направо
4. ТочноПредполагается, что левый край всех элементов (так, чтобы в первом столбце всегда был выровнен левый край)
5. Используются жестко заданные имена классов
6. Из-за используемых функций языка ES6 может потребоваться переносили переписать для поддержки старых браузеров (это то, что требуется)