使用表格或弹性框创建类似网格的 UI

Question

我需要创建一个带有行和列的类似网格的 UI。 主要要求是列和行适应单元格内容。 例如，第 1 列具有放置在第 1 列、第 1 列单元格中的文本的宽度。 第1行的高度是第1行，第2列的单元格的高度。

单元格内容是文本和单选按钮。

我可以用 flex-box 还是只用好的旧桌子来做这件事？ 有什么例子吗？

使用 flexbox 我想我需要嵌套的 flexbox 吗？不确定。

Answer 1

如果您所呈现的信息在语义上确实是表格的，那么使用表格是有意义的，因为它适合您所呈现的信息并且按照您所说的方式工作在浏览器中。

例如：

.target, .target td {
  border: 1px solid #ddd;
}
.special {
  text-align: center;
}

<table class="target">
  <tbody>
    <tr>
      <td>Column width is width of this text</td>
      <td class="special">Row height is height of this text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </tbody>
</table>

注意：您有一个“特殊”单元格，其文本居中而不是左对齐文本；我在上面使用了special 类。

---

如果信息不是表格，在语义上，您可以使用其他类型的元素来呈现它，并使用 CSS 调整它们的显示特性以获得您想要的呈现。特别是all vaguely-modern browsers support 使用display: table、display: table-row 和display: table-cell。 例如：

.target {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}

.target, .target .cell {
  border: 1px solid #ddd;
}
.special {
  text-align: center;
}

<div class="target">
  <div class="row">
    <div class="cell">Column width is width of this text</div>
    <div class="cell special">Row height is height of this text</div>
  </div>
  <div class="row">
    <div class="cell">Text</div>
    <div class="cell">Text</div>
  </div>
</div>

我使用了row 和cell 类，但您也可以使用结构选择器。