html - 使 flex 元素换行到现有行，而不是新行

Question

我正在尝试将表格(我无法更改 HTML)设置为响应式流动而不会留下间隙的 flexbox。

我在宽屏上的起始表

+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| w | x | y | z |
+---+---+---+---+

当我缩小屏幕时，这就是我得到的:

+---+---+---+
| A | B | C |
+---+---+---+
| D | 
+---+---+---+
| w | x | y |
+---+---+---+
| z | 
+---+

我想要什么:

+---+---+---+
| A | B | C |
+---+---+---+
| D | w | x |
+---+---+---+
| y | z |   |
+---+---+---+

这是我目前拥有的 CSS:

/* Relevant flexbox stuff */
.respondable {
  display: flex;
}
.respondable tr {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

/* Pretty stuff */
.respondable {
  border-collapse: collapse;
}
.respondable td {
  border: 1px solid black;
  border-collapse: collapse;
  width: 100px;
  text-align: center;
  background: #eeeeee
}

Narrow screen to see D jump onto line of its own
<table class="respondable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>w</td>
    <td>x</td>
    <td>y</td>
    <td>z</td>
  </tr>
</table>

https://jsfiddle.net/h9s7nkar/

Answer 1

当 flex 元素换行时，它们会创建新的行。

换句话说， flex 元素不会换行到现有行。

这就是为什么当第一行开始换行时第二行元素被推到第三行的原因。

来自规范:

6. Flex Lines

A multi-line flex container (i.e. one with flex-wrap: wrap or flex-wrap: wrap-reverse) breaks its flex items across multiple lines, similar to how text is broken onto a new line when it gets too wide to fit on the existing line.

最快和最简单的解决方案是将所有 flex 元素放在同一个容器中。 (我知道您不能更改 HTML。)