css flexbox包装:伪类的模拟,用于选择主/交叉轴上的开始/结束项目?

Ale*_*rov 9 html css pseudo-class css3 flexbox

Flexbox是一件好事.但是为了更多功能,当使用flex包装时:它需要伪类,第一个孩子或最后一个孩子或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*/
}
Run Code Online (Sandbox Code Playgroud)

但遗憾的是 - 没有一个带有弹性主题的伪类.

问题:我可以编写css选择器(没有JS),确定wrap-flex-container中的元素,它们位于主/交叉轴的开始/结束,还是没有?

subquestion:为什么没有flexbox的伪类,是否存在一些概念上的矛盾?

小智 1

不幸的是,目前,您无法在 CSS 中确定您的 Flex 项目在包装时是否开始新的行/列。