时间戳

首页 > 解决方案 > 使用 CSS 获取 flexbox 中的行数/行数

html - 使用 CSS 获取 flexbox 中的行数/行数

问题描述

我有一个可以有任意数量的子元素的 flexbox 元素。这些孩子可以有不同的宽度（但不超过 100%），并且都具有相同的高度，因此它们形成了整齐的行。插图：

[.....] [....]  
[.............]  
[..] [....] [.]  
[......]

当超过三行时，我想以不同的方式设置元素的样式，而不是只有三、两或一行。有没有办法用 CSS 做到这一点？

我不知道一行中有多少子元素。它可以是每行一个孩子，或者两个，或者三个。如上图所示。这些元素是根据可以更改的数据生成的，因此我无法将它们修复为每行 x 个元素。

.parent {
  display: flex;
  flex-wrap: wrap;
}

.parent .child {
  max-width: 100%;
  background: red;
}

// can I do this?
.parent:has-more-than-three-lines .child {
  background: blue;
}

我知道我可以使用 JavaScript 在渲染后读取元素的高度和子元素的高度，并计算有多少行。但我想避免这种情况。如果我必须给子元素一个固定的高度，那对我来说没问题。

需要明确的是，我想根据父母的身高来设置所有孩子的样式，而不仅仅是附加行中的孩子。

标签： htmlcssflexbox

解决方案

这是一个使用多个背景的想法，以防您知道每个元素的高度（即每行的高度）

.parent {
  display: flex;
  flex-wrap: wrap;
  margin:10px;
  
  background:
    linear-gradient(blue,blue)     0 0/100% calc(100% - 4 * 50px),
    linear-gradient(yellow,yellow) 0 0/100% calc(100% - 3 * 50px),
    linear-gradient(grey,grey)     0 0/100% calc(100% - 2 * 50px), 
    linear-gradient(pink,pink)     0 0/100% calc(100% - 1 * 50px), 
    linear-gradient(black,black)   0 0/100% calc(100% - 0 * 50px);
}

.parent > div {
  max-width: 100%;
  height:50px;
  flex-grow:1;
  min-width:100px;
  border:1px solid red;
  box-sizing:border-box;
}

div.two {
  flex-basis:22%;
  border:1px solid blue;
}
div.three {
  flex-basis:44%;
  border:1px solid green;
}
<div class="parent">
<div class="two"></div>
<div ></div>
<div ></div>
<div class="two"></div>
<div ></div>
<div class="three"></div>
<div ></div>
<div class="two"></div>
<div class="three"></div>
<div class="three"></div>
</div>

<div class="parent">
<div class="two"></div>
<div ></div>
<div ></div>
<div class="two"></div>
<div ></div>
<div class="three"></div>
<div ></div>
<div class="two"></div>
<div class="three"></div>
<div class="three"></div>
<div ></div>
<div class="three"></div>
</div>


<div class="parent">
<div class="two"></div>
<div ></div>
<div ></div>
<div ></div>
<div class="two"></div>
<div class="three"></div>
<div class="three"></div>
</div>

<div class="parent">
<div class="two"></div>
<div ></div>
<div ></div>
<div ></div>
<div class="two"></div>
</div>

诀窍很简单，我们有不同的背景层，每个层的全宽和高度等于calc(100% - n * 50px). 如果 height 的值为负，图层将不会显示，但如果为正，则会显示，并且background-repeat默认情况下repeat，它将覆盖所有元素。

顺序也很重要。例如，如果我们有 3 行，则蓝色和黄色的高度为负数，而另一行的高度为正数，因此我们将在顶部显示灰色的高度。我们添加另一行，我们使黄色为正（它将显示）。我们删除另一行，我们将其设为灰色负片，然后将显示粉红色。

当然，这个技巧只有在你想为元素应用背景样式时才有效。如果您想应用其他样式，我们应该找到其他技巧。

推荐阅读