2

I want to make use of the new Flexbox Gap property, like gap: 1rem.

This is a simple column layout with blocks that have percentage based sizes. I use flex-basis to set the size. I want those blocks to be able to "float" over multiple lines. That's why there is flex-wrap: wrap on the parent.

<div class="flex gap">
  <div class="span-half">
    <div class="box">
      span-half
    </div>
  </div>
  <div class="span-half">
    <div class="box">
      span-half
    </div>
  </div>
  <div class="span-quarter">
    <div class="box">
      span-quarter
    </div>
  </div>
  <div class="span-quarter">
    <div class="box">
      span-quarter
    </div>
  </div>
  <div class="span-half">
    <div class="box">
      span-half
    </div>
  </div>
</div>

.box {
  background: #ddd;
  padding: .5rem;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.gap {
  gap: 1rem;
}

.span-half {
  flex-basis: 50%;
}

.span-quarter {
  flex-basis: 25%;
}

Actual rendering

Expected are two lines: The first line is made of the two half (50%) containers. The second line consists of two quarter (25%) containers and a third half (50%) container.

This works when no gap is added. But once the gap property comes in the containers seem to take the availabe space, but the actual gap size is added on top of that.

It also seems to work for one line, when flex-wrap is not enabled, but maybe it is just forcing it into layout that way.

I can imagine that it requires a CSS calc function to substract the space taken by the gap from the total percentage per row but I wonder if and how this can be done. The number of child items is not fixed and it can be any kind of combination of quarter, half, third and fifth elements.

For reference: I am looking to refactor the current Flexbox Grid System of my Teutonic CSS design system based on paddings and margins: https://teutonic.co/examples/flexbox#spans I am also aware of other alternative solutions using CSS grid or floats instead.

I hope the question is clear enough?

Demo: https://codepen.io/esher/pen/zYZojaK

Frank Lämmer
  • 2,165
  • 19
  • 26
  • 1
    Not feasible with Flex. Even if you solve for the gap problem — which you can do using `flex-grow` — that creates a new problem for items alone on the line (which would consume all remaining space). https://jsfiddle.net/acx7oLrh/ – Michael Benjamin May 19 '21 at 17:47
  • 1
    Probably simpler with CSS-Grid where the number of columns is the lowest multiplier of your potential widths (1, 2, 3, 4, 5) which, if my math is right, would be 60. – Paulie_D May 19 '21 at 18:38
  • Thanks for the quick reply from Michael. The `flex-grow` approach is interesting and I haven't thought about it, but indeed it would create unexpected side effects with items filling up the last space available. – Frank Lämmer May 19 '21 at 18:39
  • https://codepen.io/Paulie-D/pen/YzZpJNR – Paulie_D May 19 '21 at 18:43
  • To Paulie_d: Yes. I actually do have [an implementation in CSS Grid](https://teutonic.co/examples/css-grid#spans) with my framework. It is similar but has some other features and issues (which I might need to post here some day). The question here is more out of interest if I am missing something obvious or if there is a smart way. – Frank Lämmer May 19 '21 at 18:44
  • @FrankLämmer, you're welcome. Here's that method in a practical and clear example. https://stackoverflow.com/q/29546550/3597276 – Michael Benjamin May 19 '21 at 19:05
  • Maybe `box-sizing: border-box;` and use border as gap but it will surely take some care – Rainbow May 20 '21 at 13:42

0 Answers0