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：

＆＃13;

/* 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
}

＆＃13;

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>

＆＃13;

https://jsfiddle.net/h9s7nkar/

Answer 1

当flex项目换行时，他们会创建 new 行。

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

这就是当第一行开始包装时第二行项目被推到第三行的原因。

来自规范：

6. Flex Lines

多行灵活容器（即具有flex-wrap: wrap或者的容器   flex-wrap: wrap-reverse）将多个Flex项目分开   线条，类似于文字在新线条上的分解方式   太宽了，无法适应现有的生产线。

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

使flex项目换行到现有行，而不是换行

1 个答案: