Как оформить пространство между предметами?

Question

Можно ли стилизовать пробелы между элементами в flex?

Сценарий дела:

1. У меня есть вид таблицы / сетки
2. Я не хочу, чтобы предметы росли (flex-grow: 0)
3. Я не хочу, чтобы space-between предметов
4. Если свободного места недостаточно, следующий предмет падает на следующую строку

Пример:

Скрипка:

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

Желаемый эффект: Я хотел бы добавить границы в нижней части этих интервалов в конце.Ты думаешь, это возможно?Есть идеи?

.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>

Answer 1

Я бы рассмотрел другой способ использования градиента.Хитрость заключается в том, чтобы иметь градиент, который будет повторяться в каждой строке, чтобы покрыть каждую новую строку, которая появится.Вам просто нужно знать высоту вашей линии, которая основана на line-height и 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>

Answer 2

Это решение не основано на flex (я также хотел бы знать, как решить его с помощью любого правила flex'ish), но оно работает.

Вместо добавления границы для элементов add и абсолютное позиционирование&:after псевдоэлемент на каждом элементе и скрытие переполнения в родительском

.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>