帶有元素內部包裝的CSS flexbox

我有一個排序元素的問題。我有容器（flexbox）vith一個孩子（訂單= 1）和兄弟div（包裝我不會使用flexbox）與孩子訂購，但不工作。帶有元素內部包裝的CSS flexbox

可以看到完整的例子：http://codepen.io/isyara/pen/HtniA（檢查包裝IM-改變順序）

感謝

2013-03-13 david

你的問題有點難理解，你的意思是你想要第二個'.contai ner'元素看起來與第一個相同？或者第一個應該和第二個一樣？ – cimmanon 2013-03-14 02:03:08

我有一個孩子命令和兩個小孩進入包裝和柔性盒來訂購帶有不包裝的孩子的包裝，我不希望包裝訂單只是孩子進入。（請參閱帶有和不帶包裝的codepen示例） – david 2013-03-14 08:49:21

如果你想要的是有第一個例子看起來像第二個例子，那麼你就出來的運氣。柔性物品只能放置在柔性容器內。

+---------------+ 
| +---------+ | 
| | a | | 
| + --------+ | 
| +---------+ | 
| | b | | 
| | +-----+ | | 
| | | c | | | 
| | +-----+ | | 
| | +-----+ | | 
| | | d | | | 
| | +-----+ | | 
| +---------+ | 
+---------------+

如果外部容器和b都是柔性容器（施加到它們display: flex），則只有這些佈置是可能的：

（CD）一個
（DC）一個
一個（CD）
一個（DC）

如果b是而不是 flex容器，則c和d不是flex項目，並且根本不能使用order屬性進行排列。

元素A，c和d必須sibblings完全重新排列：

+---------------+ 
| +---------+ | 
| | a | | 
| + --------+ | 
| +---------+ | 
| | c | | 
| + --------+ | 
| +---------+ | 
| | d | | 
| + --------+ | 
+---------------+

現在，你可以擁有所有的安排，從前面的例子，加上這些：

來源

2013-03-14 12:41:23 cimmanon

是的，我想要c安排，但a不是c - d的兄弟。謝謝你的解釋cimmanon – david 2013-03-14 12:46:57

帶有元素內部包裝的CSS flexbox

回答

相關問題