如何在CSS Flex之间删除空间包含

Question

我正在尝试使用CSS Flex Box

创建表结构

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

我有一个使用Flex justify-content: space-between;间隔的元素的容器，但是可以删除空间在div之间，所以他们彼此相邻。

我可以通过使单元宽度100％BU获得我想要的效率，然后我无法控制单元格的宽度

*{
  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

我不确定我完全理解您的问题。但是我认为，如果您在.grid-cell类中添加最大宽度，则可能会得到您想要的。

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

请参阅此处的小提琴

但是，如果您希望这种响应能力，则该解决方案将无法完全解决问题。

实现这一目标的一种更响应的方法是切换到使用

display: grid;

请参阅此处的网格选项

编辑要添加注释 - 如果要在网格显示屏上进行间距，请在网格单元中添加边距。