Question

我正在尝试使用CSS Flex Box创建表结构

我有一个容器，其元素使用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;
}

请参见fiddle here

但是，如果您希望此响应迅速，则此解决方案将无法完全解决问题。

完成此任务的一种更灵敏的方法是切换为使用

display: grid;

请参见网格选项here

经过编辑以添加注释-如果要在网格显示中保留间距，请向网格单元格添加边距。

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

1 个答案: