使弹性项目换行到现有行，而不是新行答案

【问题标题】：Make flex items wrap to existing lines, not new lines使弹性项目换行到现有行，而不是新行
【发布时间】：2017-04-02 16:34:25
【问题描述】：

我正在尝试将表格样式（我无法更改 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/

【问题讨论】：

你可以试试这样的吗？ jsfiddle.net/h9s7nkar/1 没有弹性？
这似乎可以解决问题，这是一个在 flexbox 之外思考的例子！
您不能“将表格设置为 flexbox”。您必须使用 flexbox 而不是 table。

标签： html css responsive-design flexbox

【解决方案1】：

当 flex 项目包装时，它们会创建新行。

换句话说，弹性项目不会换行到现有行。

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

来自规范：

6. Flex Lines

一个多行 flex 容器（即一个带有 flex-wrap: wrap 或 flex-wrap: wrap-reverse) 打破了它的弹性项目在多个行，类似于将文本换行时的方式太宽而无法容纳在现有线中。

最快和最简单的解决方案是将所有弹性项目放在同一个容器中。（我知道您不能更改 HTML。）

【讨论】：