flex コンテナと flex アイテムのサイズが固定で、どの要素が一列目になるのかが明確な場合は、単純に :nth-of-type
, :nth-child
擬似クラスを用いて選択することが出来ます。
#outer {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 50vh;
background: gray;
}
#outer div {
flex-basis: 50%;
background: lightgreen;
}
#outer div:nth-child(odd) {
box-sizing: border-box;
border: dotted red;
}
<div id="outer">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>
そうでない場合、現在でも CSS では不可能です[1]。以下のスニペットに書いたように、 JavaScript を使う必要があります。
const onResize = () => {
const item = [...document.querySelectorAll("#outer > div")];
let prev;
const first = item.filter(e => {
const top = e.getBoundingClientRect().top;
if (typeof prev == "undefined" || top != prev) {
prev = top;
return true;
}
e.classList.remove("first-column");
});
first.map(e => e.classList.add("first-column"));
};
onResize();
window.addEventListener("resize", onResize);
#outer {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 50vh;
background: gray;
}
#outer div {
flex-basis: 100px;
background: lightgreen;
}
.first-column {
box-sizing: border-box;
border: dotted red;
}
<div id="outer">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
</div>
[1]: いつか出来るようになるかもしれない