Question

我正在使用flexbox创建一个网格，我想使用overflow-x（可能会有更多列，而不是下面的代码段）。但是，我注意到每行的下边框没有完全延伸，即它不占用整个宽度....我使用的CSS有什么问题？

private static void getScreenshot(final WebElement e, String fileName) throws IOException {
  final BufferedImage img;
  final Point topleft;
  final Point bottomright;
  final byte[] screengrab;
  screengrab = ((TakesScreenshot) driver).getScreenshotAs(OutputType.BYTES);
  img = ImageIO.read(new ByteArrayInputStream(screengrab));
  topleft = e.getLocation();
  bottomright = new Point(e.getSize().getWidth(), e.getSize().getHeight());
  BufferedImage imgScreenshot= 
      (BufferedImage)img.getSubimage(topleft.getX(), topleft.getY(), bottomright.getX(), bottomright.getY());
  File screenshotLocation = new File("Images/"+fileName +".png");    
  ImageIO.write(imgScreenshot, "png", screenshotLocation);
 }

.grid {
  background-color: #fff;
  overflow-x: scroll;
  overflow-y: scroll;
}

.gridHeader {
  display: flex;
  border-bottom: 1px solid #d2d7dc;
}

.gridHeader .gridCell {
  font-weight: bold;
  color: #334D5C;
  text-decoration: none;
  margin-right: 5px;
  border: none;
}

.gridHeader .gridCell:hover {
  opacity: 0.8;
}

.gridBody {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.gridHeader .fa {
  margin-left: 5px;
  opacity: 0.8;
}

.gridHeader .fa-sort {
  color: #45B29D;
}

.gridHeader .fa-sort-asc,
.gridHeader .fa-sort-desc {
  color: #45B29D;
}

.sortable {
  cursor: pointer;
}

.gridRow {
  display: flex;
  min-width: calc(100% / 7);
  background-color: #fff;
  border-width: 0px 0px 1px 0px;
  border-color: #d2d7dc;
  border-style: solid;
  min-height: 50px; //max-height: 80px;
  line-height: 30px;
}

.gridRow:hover {
  color: #45B29D;
}

.gridCell {
  min-width: calc(100% / 7);
  padding: 10px;
  white-space: break-word;
  text-align: center; //box-sizing: border-box;
  padding: 10px;
  word-break: break-all; //overflow:hidden;
}

.ui-sortable-placeholder {
  border: 3px dashed #aaa;
  height: 50px;
  min-width: calc(100% / 7);
  background: #D1E5FA;
}

Answer 1

如果单元格宽度可能不同，我不明白flex如何帮助你，因为

您没有为所有单元格设置相同的width，而是设置min-width。
您没有为flex-shrink设置0以避免细胞萎缩

所以我建议你切换到表格（你可以通过设置display: table-row，display: table-cell设置相应的元素来实现这一目标，等等）如果你不打算设置一些单元格宽度的固定值。

所以，如果你要改变

flex布局为table
100%替换为100vw
将边框定义移至单元格
将边距更改为表格单元格的填充

这将按预期工作：

.grid {
  background-color: #fff;
  overflow-x: scroll;
  overflow-y: scroll;
}

.gridHeader {
  display: table-row;
}

.gridHeader .gridCell {
  display: table-cell;
  font-weight: bold;
  color: #334D5C;
  text-decoration: none;
  padding-right: 5px;
}

.gridHeader .gridCell:hover {
  opacity: 0.8;
}

.gridBody {
  display: table-row-group;
  flex-direction: column;
  flex: 1;
}

.gridHeader .fa {
  margin-left: 5px;
  opacity: 0.8;
}

.gridHeader .fa-sort {
  color: #45B29D;
}

.gridHeader .fa-sort-asc,
.gridHeader .fa-sort-desc {
  color: #45B29D;
}

.sortable {
  cursor: pointer;
}

.gridRow {
  display: table-row;
  background-color: #fff;
  min-height: 50px;
  line-height: 30px;
}

.gridRow:hover {
  color: #45B29D;
}

.gridCell {
  display: table-cell;
  min-width: calc(100vw / 7);
  flex-shrink: 0;
  padding: 10px;
  border-bottom: 1px solid #d2d7dc;
  white-space: break-word;
  text-align: center;
  padding: 10px;
  word-break: break-all;
}

.ui-sortable-placeholder {
  border: 3px dashed #aaa;
  height: 50px;
  min-width: calc(100vw / 7);
  background: #D1E5FA;
}

<div class="grid ui-sortable">
  <div class="gridHeader">
    <div id="inline-actions" class="gridCell"></div>
    <div id="title" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="title">title<i class="fa fa-sort"></i></div>
    <div id="customer" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="customer">customer<i class="fa fa-sort"></i></div>
    <div id="price" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="price">price<i class="fa fa-sort"></i></div>
    <div id="calories" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="calories">calories<i class="fa fa-sort"></i></div>
    <div id="vegetarian" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="vegetarian">vegetarian<i class="fa fa-sort"></i></div>
    <div id="duedate" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="duedate">duedate<i class="fa fa-sort"></i></div>
  </div>
  <div class="gridBody">
    <div class="gridRow" data-recordnumber="0">
      <div class="gridCell" data-recordnumber="0"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div>
      <div class="gridCell">Chocolate Pancakes With Fruits</div>
      <div class="gridCell">Bilbo Baggins</div>
      <div class="gridCell">300</div>
      <div class="gridCell">1997.07</div>
      <div class="gridCell">true</div>
      <div class="gridCell">2017-07-04</div>
    </div>
    <div class="gridRow" data-recordnumber="1">
      <div class="gridCell" data-recordnumber="1"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div>
      <div class="gridCell">Cinnamon Sugar Fried Apples</div>
      <div class="gridCell">Frodo Baggins</div>
      <div class="gridCell">200</div>
      <div class="gridCell">1997.07</div>
      <div class="gridCell">true</div>
      <div class="gridCell">2017-07-06</div>
    </div>
  </div>
</div>

Answer 2

只需在min-width

将width更改为.gridCell即可

.gridCell {
  width: calc(100% / 7); 
  ...
}

＆＃13;

.grid {
  background-color: #fff;
  overflow-x: scroll;
  overflow-y: scroll;
}

.gridHeader {
  display: flex;
  border-bottom: 1px solid #d2d7dc;
}

.gridHeader .gridCell {
  font-weight: bold;
  color: #334D5C;
  text-decoration: none;
  margin-right: 5px;
  border: none;
}

.gridHeader .gridCell:hover {
  opacity: 0.8;
}

.gridBody {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.gridHeader .fa {
  margin-left: 5px;
  opacity: 0.8;
}

.gridHeader .fa-sort {
  color: #45B29D;
}

.gridHeader .fa-sort-asc,
.gridHeader .fa-sort-desc {
  color: #45B29D;
}

.sortable {
  cursor: pointer;
}

.gridRow {
  display: flex;
  min-width: calc(100% / 7);
  background-color: #fff;
  border-width: 0px 0px 1px 0px;
  border-color: #d2d7dc;
  border-style: solid;
  min-height: 50px; //max-height: 80px;
  line-height: 30px;
}

.gridRow:hover {
  color: #45B29D;
}

.gridCell {

  /* min-width: calc(100% / 7); */  
  width: calc(100% / 7);
  
  padding: 10px;
  white-space: break-word;
  text-align: center; //box-sizing: border-box;
  padding: 10px;
  word-break: break-all; //overflow:hidden;
}

.ui-sortable-placeholder {
  border: 3px dashed #aaa;
  height: 50px;
  min-width: calc(100% / 7);
  background: #D1E5FA;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="grid ui-sortable">
  <div class="gridHeader">
    <div id="inline-actions" class="gridCell"></div>
    <div id="title" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="title">title<i class="fa fa-sort"></i></div>
    <div id="customer" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="customer">customer<i class="fa fa-sort"></i></div>
    <div id="price" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="price">price<i class="fa fa-sort"></i></div>
    <div id="calories" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="calories">calories<i class="fa fa-sort"></i></div>
    <div id="vegetarian" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="vegetarian">vegetarian<i class="fa fa-sort"></i></div>
    <div id="duedate" class="sortable gridCell ui-sortable-handle" title="Click on title to sort. Drag and drop to reorder." data-sort="nosort" data-header="duedate">duedate<i class="fa fa-sort"></i></div>
  </div>
  <div class="gridBody">
    <div class="gridRow" data-recordnumber="0">
      <div class="gridCell" data-recordnumber="0"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div>
      <div class="gridCell">Chocolate Pancakes With Fruits</div>
      <div class="gridCell">Bilbo Baggins</div>
      <div class="gridCell">300</div>
      <div class="gridCell">1997.07</div>
      <div class="gridCell">true</div>
      <div class="gridCell">2017-07-04</div>
    </div>
    <div class="gridRow" data-recordnumber="1">
      <div class="gridCell" data-recordnumber="1"><i id="edit" class="actions fa fa-pencil"></i><i id="delete" class="actions fa fa-trash"></i></div>
      <div class="gridCell">Cinnamon Sugar Fried Apples</div>
      <div class="gridCell">Frodo Baggins</div>
      <div class="gridCell">200</div>
      <div class="gridCell">1997.07</div>
      <div class="gridCell">true</div>
      <div class="gridCell">2017-07-06</div>
    </div>
  </div>
</div>

＆＃13;

使用溢出时，Flexbox不占用整个宽度

2 个答案: