使彈性項目換行到現有的行，而不是新行

我試圖將一個表格（我不能更改HTML）作爲一個靈活的流動，沒有留下空隙響應流動。在寬屏使彈性項目換行到現有的行，而不是新行

我的出發表

+---+---+---+---+ 
| 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/

來源

2016-11-18 iantresman

你可以嘗試這樣的事情嗎？ https://jsfiddle.net/h9s7nkar/1/沒有flex？ – sinisake

這似乎是一個竅門，一個在Flexbox之外思考的例子！ – iantresman

您無法「將表格設置爲柔性盒」。您必須使用flexbox **而不是表**。 – 2016-11-30 16:32:14

時，Flex項目包裝他們創造新線。

換句話說，Flex項目不會換行到現有的行。

這就是爲什麼當頂行開始包裝時，第二行物品被推到第三行。

從規格：

6. Flex Lines

多行柔性容器（即，一個與flex-wrap: wrap或 flex-wrap: wrap-reverse）分解在多個其柔性物品線，類似於文本是如何如果變得太寬以致無法適應現有的生產線，則會劃破新線。

最快最容易的解決方案是將所有的彈性物品放在同一個容器中。（我明白你不能改變HTML。）

來源

2016-11-18 18:41:57

使彈性項目換行到現有的行，而不是新行

回答

相關問題