When creating a component that adapts to available space without using Media Queries, I found myself in a situation where I had two items and wanted a border between them.
The border would be left (or right) when items lined up horizontally, but top (or bottom) when the items lined up vertically.
In essence, I wanted border-between
or somesuch.
With a little fiddling, I came up with the following solution:
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.item {
flex: 1 1 20em;
background-color: hotpink;
border-top: 1px solid purple;
border-left: 1px solid purple;
margin-top: -1px;
margin-left: -1px;
}
...where the border is always present on top/left, but hidden with negative margins (resize the viewport to see it in action).
Then, I thought, ”wait, I could just use the logical direction keywords (border-block-start
vs border-inline-start
etc) in modern browsers”, quickly followed by, ”no, I can’t – the logical direction isn’t actually changing.”
Anyway, current status: feeling clever/feeling dirty.