CODEWITHSUNDEEP
cssflexboxcss-grid
jbarradas
jbarradas

Reputation: 2161

How to style space between items?

Is it possible to style spaces between items in flex?

Case Scenario:

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

Example:

enter image description here

Fiddle:

https://jsfiddle.net/t245o0vr/21/

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>

Upvotes: 2

Views: 464

Answers (2)

Temani Afif
Temani Afif

Reputation: 272592

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(
      #0000 0 calc(1.2em + 20px),
      #ccc  0 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>

Upvotes: 1

Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

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>

Upvotes: 3

Related Questions