时间戳

首页 > 解决方案 > 仅设置每个 flexbox 行中的第一项

css - 仅设置每个 flexbox 行中的第一项

问题描述

我有一个水平的、环绕的 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 来解决这个问题，那对我来说也是一个很好的解决方案。

更新

这可以使用 CSS Grid 和auto-fillorauto-fit值来完成。有关详细信息，请参阅此问题：

CSS 网格环绕

标签： cssflexbox

解决方案

正如@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>

这个例子真的很基础，只是为了展示一个工作原理，但为了在实际场景中可用，应该对其进行扩展以规避以下缺点：

  1. javascript 仅在启动和窗口调整大小时运行 - 最好在父级上使用resizeObserver.wrapper，但支持真的很差。
  2. 它不会检测每个 flex child 内容的大小变化
  3. 只假定从左到右的方向
  4. 假定所有项目的确切左边距（以便第一列始终对齐左边缘）
  5. 它使用硬编码的类名
  6. 由于使用了 ES6 语言特性，它可能需要转译或重写以支持旧版浏览器（这是必需的）

推荐阅读