CSS Flexbox wrapping: select start/end items on main/cross axis?

Question

Flexbox is a great thing. But I would like more versatility when it comes to Flexbox wrapping. I need CSS pseudo-classes to style items that are at the start or end of the main or cross axis. These would be analogues of :first-child, :last-child, or :nth-child.

For example, I want to have selectors like the following:

.flexbox
{
  display: flex;
  flex-flow: row wrap;
}

.flexbox .item:flex-start
{
  /* items on the left side of the container */
}

.flexbox .item:flex-end
{
  /* items on the right side of the container */
}

.flexbox .item:flex-cross-start
{
  /* items at the top of the container */
}

.flexbox .item:flex-cross-end
{
  /* items at the bottom of the container */
}

But sadly, there are no pseudo-classes that are meant for Flexbox.

Question: Can I write CSS selectors (without JavaScript) that target items in a wrapping Flexbox container, based on whether the items are at the start/end of the main/cross axis?

Sub-question: Why are there no pseudo-classes for Flexbox? Are there some conceptual reasons that make this unreasonable?

Answer 1

Unfortunately, at the moment, you have no way to determine in CSS if your flex item is starting a new row / column when wrapped.