使用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的孩子

回答

相关问题