Question

我找不到任何快速答案。在表格行（unread_count_display）元素上使用display: flex;是否很酷？

感觉不对。但如果没有兼容性问题，我会这样做

Here's a codepen of what I'm talking about

<tr>

input[type="radio"]:checked,
input[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

input[type="radio"]:checked+label,
input[type="radio"]:not(:checked)+label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #666;
}

input[type="radio"]:checked+label:before,
input[type="radio"]:not(:checked)+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-radius: 100%;
  background: #fff;
}

input[type="radio"]:checked+label:after,
input[type="radio"]:not(:checked)+label:after {
  content: '';
  width: 14px;
  height: 14px;
  background: #fc8f3f;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

input[type="radio"]:not(:checked)+label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

input[type="radio"]:checked+label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.dots-wrap form {
  width: 700px;
}

.dots-wrap div {
  width: 900px;
}

.dots-wrap form,
.dots-wrap div {
  display: flex;
  justify-content: space-between;
}

.dots-wrap div label {
  font-size: 11px;
}

h2.strikethrough {
  position: relative;
  z-index: 1;
  width: 700px;
}

h2.strikethrough:before {
  border-top: 2px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 32px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}

.dots-wrap form div h2 {
  display: flex;
  justify-content: space-between;
}

.dots-wrap form div {
  width: 100%;
}

.dots-wrap form div h2 p {
  margin: 0px;
}


/*dasdfasdfasdfasdfasdfasdfasdf*/

Answer 1

就兼容性问题而言，您只需测试不同浏览器如何呈现应用于表元素的flex属性。我发现Chrome中没有任何问题。

就最佳实践而言，我也没有看到任何问题。 HTML表元素的语义值存在。应用于这些元素的CSS没有语义价值。因此，将表行（tr）从其默认display: table-row切换到display: flex不会改变语义，只会改变布局。

然而，我认为你正冒险进入未知领域。您将最旧的HTML与最新的CSS混合使用。因为浏览器具有用于渲染表的长期算法，所以我不会将它们与flex属性混合使用。我希望冲突能搞得一团糟。我会用div来代替。

Answer 2

MS IE / Edge与其他浏览器之间存在兼容性问题。 Edge仍然实现旧版本的Flexbox规范，根据哪个Flex容器内的表格单元格应该用匿名表格框包装，这个匿名表格成为唯一的flex元素。根据较新的规范，每个表格单元格成为单独的弹性项目。 Chrome总是以这种方式运行（事实上，规范已经改变以更好地匹配现实），并且Firefox在某些时候改变了它的行为，现在它的行为与Chrome相同。

此外，通过使表行成为flex容器，您可以破坏表结构的最大优势之一 - 行和列的2D结构。由于单元格不再属于表格上下文，因此它们不会对齐列，除非您手动设置相同的宽度。（这可能与此特定情况无关，但在将Flexbox样式应用于表元素的一般情况下相关）。

也就是说，这种黑客在非常有限的情况下非常有用，可以使表格响应狭窄的屏幕（使用flex-wrap:wrap）。但通常我会避免它。

在表格行上使用flexbox？

2 个答案: