Как убрать пробел между css flex содержит

Question

Я пытаюсь создать структуру таблицы, используя css flex box

https://codepen.io/anon/pen/OqbPLo

У меня есть контейнер с элементами, разнесенными с помощью flex justify-content: space-between;, но возможно ли удалитьпространство между элементами, поэтому они сидят рядом друг с другом.

Я могу добиться желаемой эффективности, сделав ширину ячейки 100%, но тогда я не смогу контролировать ширину ячеек

*{
  font-family: sans-serif;
}

.content-wrapper,
.content-header{
  display: contents;
}

.content-header{
  .grid-cell{
      font-weight: bold;
    }
}

.grid-wrapper{
  border: 1px solid grey;
}
.grid-cell{
  padding: 5px;
  border: 1px solid lightgrey;
  white-space: no-wrap;
}
.grid-header,
.grid-content{
  display: flex;
  justify-content: space-between;
  //align-content: stretch;
}

.grid-cell-1{
  flex-basis: 80px;
}
.grid-cell-2{
  flex-basis: 68px;
}
.grid-cell-3{

}
.grid-cell-4{
  flex-basis:58px;
}
.grid-cell-5{
  flex-basis: 58px;
}
.grid-cell-6{
  flex-basis: 58px;
}
.grid-cell-7{
  flex-basis: 58px;
}
.grid-cell-8{
  flex-basis: 58px;
}
.grid-cell-9{
  flex-basis: 58px;
}
.grid-cell-10{
  flex-basis: 58px;
}
.grid-cell-11{
  flex-basis: 58px;
}
.grid-cell-12{
  flex-basis: 58px;
}
.grid-cell-13{
  flex-basis: 58px;
}


@media(max-width: 700px){
  .grid-header{
    display: none;
  }

  .grid-content{
    display: initial;
  }

  .grid-cell{
    display: inline;
  }

  .grid-content{
    display: flex;
  }

  .content-wrapper{
    display: initial;
  }

  .content-header{
    display: block;

  }
}

Answer 1

Я не уверен, что полностью понимаю ваш вопрос. Но я думаю, что если вы добавите max-width в свой класс .grid-cell, вы можете получить то, что вы хотите.

.grid-cell{
  padding: 5px;
  border: 1px solid lightgrey;
  flex-grow: 1;
  width: 100%;
  max-width: 100px;
} 

См. Скрипку здесь

Однако, если вы хотите, чтобы это было отзывчивым, это решение не полностью решит проблему.

Более гибкий способ сделать это - перейти на использование

display: grid;

См. Параметр сетки здесь

Отредактировано для добавления заметки - если вы хотите сделать интервалы на экране сетки, добавьте поле к ячейкам сетки.