How to style space between items?

Question

Is it possible to style spaces between items in flex?

Case Scenario:

I have a kind of table/grid
I don't want items to grow (flex-grow: 0)
I don't want space-between items
If there is not enough remaining space, next item falls to next line

Example:

Fiddle:

Desired effect: I would like to add a border-bottom in those spacing in the end. You think it's possible? Any ideas?

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-bottom: 0;
  
  max-width: 470px; /* for the sake of example */
}

.item {
  display: inline-flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

<div class="container">
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
</div>

Tricky problem. Here are some ideas: https://stackoverflow.com/q/47882924/3597276 — Michael Benjamin, Dec 20 '18 at 16:25
Hmmm....if there is no element, it can't have a border...and you can't style rows that don't exist. — Paulie_D, Dec 20 '18 at 16:28
@ToniMichelCaubet OP stated *"I don't want space-between items"* — Paulie_D, Dec 20 '18 at 16:29
Sorry you edited the question. So the problem is that the border doesn't fill the container? — Toni Michel Caubet, Dec 20 '18 at 16:30
Maybe add the lines as a repeating gradient background where the background size is based on em units? — Nate Whittaker, Dec 20 '18 at 16:33

Toni Michel Caubet · Accepted Answer · 2018-12-20T16:46:27.077

3

This solutions is not based in flex (I also would like to know how to solve it with any flex'ish rule) but it works.

Instead of adding border to elements add and absolute positioned &:after pseudo-element on every item and hide the overflow in parent

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-bottom: 0;
  max-width: 470px; /* for the sake of example */
  overflow: hidden; /* <------- new */
}

.item {
  display: inline-flex;
  padding: 10px;
  /* border-bottom: 1px solid #ccc;   <---- removed */
  position: relative; /* <------- new */
}
.item:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw; /* Bigger enough :P */
  border-bottom: 1px solid #ccc;
}

<div class="container">
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
</div>

edited Dec 20 '18 at 16:46

answered Dec 20 '18 at 16:37

Toni Michel Caubet

19,333
56
202
378

1

Yeah...that was my initial thought too. +1 – Paulie_D Dec 20 '18 at 16:41
Cool solution! Can you explain that `width: 600%; depending on items.length`? To note: items width are not fixed, all have width to fit content. – jbarradas Dec 20 '18 at 16:42
1

Any very large width would do...I'd suggest 100vw – Paulie_D Dec 20 '18 at 16:42
wouldn't 100% enough? :p will try it out and mark as correct asap – jbarradas Dec 20 '18 at 16:43
No...because it would 100% of the element not the parent. – Paulie_D Dec 20 '18 at 16:44
Well, its about how may items per row you expect. In the given example there are 5 elements, so if there was an extra row with just one element 600% probably fit the item-less space. You could just apply a massive number and the result would be the same. +1 for @Paulie_D suggestion of 100vw – Toni Michel Caubet Dec 20 '18 at 16:44
1

Working as a charm. Thanks folks! – jbarradas Dec 20 '18 at 16:51

score 0 · Answer 2 · answered Dec 20 '18 at 19:27

I would consider another way using gradient. The trick is to have a gradient that will get repeated each line to cover each new line that will appear. You simply need to know the height of your line which is based on the line-height and padding

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  line-height:1.2em;
  background:
    repeating-linear-gradient(to bottom, 
      transparent 0,transparent calc(1.2em + 20px),
      #ccc calc(1.2em + 20px),#ccc calc(1.2em + 21px));
  max-width: 470px; /* for the sake of example */
}

.item {
  display: inline-flex;
  padding: 10px;
}

<div class="container">
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
</div>

How to style space between items?

2 Answers2