css flexbox wrapping：模拟伪类来选择主轴/交叉轴上的开始/结束项目？

Posted 2023-03-05

【中文标题】css flexbox wrapping：模拟伪类来选择主轴/交叉轴上的开始/结束项目？

【英文标题】：css flexbox wrapping: analogue of pseudo-classes to select start/end items on main/cross axis?

【发布时间】：2016-11-21 17:10:54

【问题描述】：

Flexbox 是个好东西。但是为了获得更多的通用性，当使用 flex 包装时：它需要伪类，类似于 first-child 或 last-child 或 nth-child。

如果项目在主轴的末端，或者它被包裹并且现在它在主轴的开头，将会很舒服。

例如，我想要这个：

.flexbox

    display: flex;
    flex-flow:row wrap;


.flexbox .item:flex-start

    /*items in the left of container selector*/


.flexbox .item:flex-end

    /*items in the right of container selector*/


.flexbox .item:flex-cross-start

    /*items on the top of container selector*/

.flexbox .item:flex-cross-end

    /*items on the bottom of container selector*/

但很遗憾 - 没有带有弹性主题的 pseudo classes。

问题：我可以编写 css 选择器（没有 JS），确定 wrap-flex-container 中位于主轴/交叉轴开始/结束的元素吗？

子问题：为什么 flexbox 没有伪类，是不是有些概念上的矛盾？

【问题讨论】：

我被你的问题弄糊涂了

【参考方案1】：

Q1：我可以写css选择器（不用JS）吗？

CSS 会将任何表示分配给 html 标签，无论是官方的还是非官方的 HTML 比如

myEnclosure
  background: black;
  color: white;
  display: block;
  font-family: arial;
  font-size: 18pt;
  height: 300px;
  line-height: 3em;
  Width: 100%

ScoreBoardTitle
 display: block;
 font-size: 30pt;
 margin: 0 auto;
 text-align: center;
 width: 100%

myList
  Color: yellow;
  display: block;
  position: relative;
  left: 30px;
  top: 2em;

ListItem
  display: block;
  margin: 0;
  position: relative;
  top: -2em;

<myEnclosure>
  <myScoreBoard>
    <ScoreBoardTitle>LAKERS VS UNKNOWN</ScoreBoardTitle>
    <myList>
      <ListItem>Hello
      <ListItem>Hello 2
      <ListItem>Hello 3 
      <ListItem>Hello 4
    </myList>
  </myScoreBoard>
</myEnclosure>

如您所见，我的 HTML 不是官方的，CSS 选择器是“标签选择器” 因此，要回答您的问题，您能否编写一个没有 javascript 的 CSS 选择器

答案是：是的 从我的演示中可以清楚地看到，所有选择器都是自定义的

但是，选择器块中的属性和值必须符合标准 CSS，因为 CSS 不是一种允许在面向对象编程方面使用函数或类的语言。

Q2 - 为什么 flexbox 没有伪类？ Psuedos 适用于您引用的元素和事件状态 元素伪类不是基于属性值定制的，这将非常难以阅读代码并遵循开发人员所做的事情，并且会非常混乱。

当然，如果您希望元素根据其显示类型以某种方式表现，那么 JavaScript 提供了创建函数和对象然后对其行为进行编程的能力。

我希望这有助于让您清楚自己的挣扎，如果您有任何其他问题，请随时提出，并尽我所能提供帮助。

【讨论】：

您在第一部分中回答的“Q1”问题并不是这里实际提出的问题……他们想知道是否有任何方法可以根据元素当前在弹性容器。您的“所有选择器都是自定义的”与此完全无关，并且一点也没有回答这个问题。