Discussion on: An ode to the CSS owl selector

View post

I enjoy a lot the owl-selector, but recently I realized that it could be replaced (in many cases) by a flexbox with row/column gap. At least for me, it works for most of my cases.
So, this:

.my-row-class > * + * {
  margin-left: 12px;
}

Could be replaced by

.my-flex-container {
  display: flex;
  column-gap: 12px;
}

In this case, all the items of the row will have a spacing of 12px among them. Even if list is broken into more lines (using flex-wrap: wrap;), each item starting in the below lines will not have the left-margin applied to it (they will be correctly aligned). Then, can also add a spacing among the lines:

.my-flex-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;  // spacing on the left of each children (except the first of each line)
  row-gap: 8px  // spacing on the top of each line (except the first line)
}