Stupid border tricks.

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.