使用Flexbox，就到拆封和中間含inline-block的孩子

通常情況下，含包裝display:inline-block元素佔用的可用寬度的100％，給你這樣的一個元素的元素：使用Flexbox，就到拆封和中間含inline-block的孩子

-----------------BODY------------------ 
|          | 
||-------------CONTAINER-------------|| 
||-INLINEBLOCK---INLINEBLOCK--  || 
|||____________||____________|  || 
||-INLINEBLOCK--      || 
|||____________|      || 
||___________________________________|| 
|_____________________________________|

說，而不是你想拆封和中心集裝箱：據我可以告訴

-----------------BODY------------------ 
|          | 
| |----------CONTAINER---------| | 
| |-INLINEBLOCK---INLINEBLOCK--| | 
| ||____________||____________|| | 
| |-INLINEBLOCK--    | | 
| ||____________|    | | 
| |____________________________| | 
|_____________________________________|

，這是不可能與傳統的CSS和required JavaScript hacks。

Flexbox可以解決這個問題嗎？如果是這樣，怎麼樣？

[圖表無恥地從this question被盜。]

來源

2016-03-13 Nathan Arthur

否..flexbox不能這樣做......沒有佈局方法可以......這不是線框模型的工作方式。 –

可能重複 - http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width ...或至少相關。 –

@Paulie_D不直接關於flexbox（也推薦JS）;但是，是的，有關。 –

使用body爲您的Flex容器，然後container成爲柔性項。

Fiddle

HTML：

<body> 
    <div class="container"> 
    <span class="inline-block"></span> 
    <span class="inline-block"></span> 
    <span class="inline-block"></span> 
    </div> 
</body>

CSS：

body{ 
    display:flex; 
    justify-content:space-between; 
} 
.container{ 
    margin:auto; // centers horizontally 
} 
.inline-block{ 
    display:inline-block; 
    width:200px; 
    height:32px; 
    background:#ccc; 
}

隨意玩弄小提琴。不過，這應該給你基本的想法。

來源

2016-03-13 20:15:15 shamsup

您可以在'.container'元素上設置最大寬度，以限制寬度並在裏面包裝。如果有包裝，並且最大寬度不是內部對象寬度的倍數，那麼在'.container'的右側會有空白。爲了解決這個問題，你也可以使'.container''顯示：flex'，這樣你就可以用flexbox控制它裏面的物品。 – shamsup

謝謝你給它一個鏡頭，但這似乎並沒有做我正在尋找的東西。容器只應該是內部物品的寬度，最後一行中的物品應該與左側對齊。你是否可以用你的一些建議來編輯你的小提琴來讓它更接近？ –

使用Flexbox，就到拆封和中間含inline-block的孩子

回答

相關問題