html - 使用不同行上的内容控制 Flexbox 列宽

Question

我正在尝试使用 Flexbox 实现类似表格的结构，因为表格在我试图放入的上下文中真的很难控制，而且众所周知 tr 不会可以很好地处理动画和一些 CSS 样式，并且在多种浏览器和设备上非常不一致。

看看这个 fiddle :http://jsfiddle.net/68Lc86sg/

我想要做的是使最后两列在所有行中具有相同的宽度，就像在表格示例中一样。有没有办法使用 flexbox 实现这一点？

Answer 1

Flexbox 不是最合适的方式，因为它没有网格概念。

但是，您可以(或多或少)通过将所有网格单元格放在同一个 flex 容器中、重新排序并使用列布局来实现它。

dl {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0;
  padding: 5px 0;
  height: 4em;
}
dt, dd {
  padding: 4px;
  margin: 0;
  flex: 0 1 50%;
  min-height: 0;
  border: 1px solid #888;
  box-sizing: border-box;
}
dt { order: 1; }
dt + dd { order: 2;}
dt + dd + dd { order: 3; }

<dl>
  <dt>Hotel 25</dt>
    <dd>0 stars</dd>
    <dd>0 ratings</dd>
  <dt>Hotel 2254</dt>
    <dd>1222 stars</dd>
    <dd>124 ratings</dd>
</dl>