css 将多行Flex容器中每行的第一项作为目标

cigdeys3 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(108)

我有一个多行Flexbox容器display: flex; flex-wrap: wrap。我如何将样式或css类应用到每行的第一项？
我唯一能想到的就是使用JavaScript来覆盖这些项目，并手动应用/删除类。我真的很喜欢一个纯css的解决方案。
我不知道有多少项目将提前在Flex框中，或者它们的宽度最终会是什么。

css

来源：https://stackoverflow.com/questions/47445304/targeting-the-first-item-on-each-line-in-a-multiline-flex-container

2条答案

按热度按时间

qkf9rpyu1#

这在CSS中是不可能的。
当每行中的项目数量不可预测时，将多行Flex容器的每行中的第一个项目作为目标超出了CSS的能力，因为每行中的第一个项目是任意的。它可以是放在第一位的任何项目。
最好的情况下，CSS可以匹配一个明确的模式。如果没有一个模式，你将需要另一种技术。
试试JavaScript。
CSS Grid Layout也有同样的限制：