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

Posted 2023-03-07

【中文标题】使弹性项目换行到现有行，而不是新行

【英文标题】：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。

【参考方案1】：

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

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

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

来自规范：

6. Flex Lines

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

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