Question

我有一个水平的，包裹式的flexbox，就像这样：

.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年3月），使用纯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>

该示例实际上只是基本且基本的目的，只是为了显示一个工作原理，但是为了在实际场景中可用，应将其扩展以规避以下缺点：

该javascript仅在启动和调整窗口大小时运行-最好在父.wrapper上使用resizeObserver，但支持really poor。
它不会检测每个flex子内容的大小变化
仅假定从左到右的方向
假定所有项目的精确左边距（以便第一列的左边缘始终对齐）
它使用硬编码的类名
由于使用了ES6语言功能，可能需要转译或重写以支持较旧的浏览器（必需）

在flexbox的每一行中仅设置第一项的样式

1 个答案: