Question

通常，包含display:inline-block元素的元素占用可用宽度的100％，这样就可以了：

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

说，相反，你想要收缩包装并使容器居中：

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

据我所知，传统的CSS和required JavaScript hacks是不可能的。

使用flexbox可以解决这个问题吗？如果是这样，怎么样？

[图表从this question无耻地被盗。]

Answer 1

使用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;
}

随意玩小提琴。不过，这应该会给你一个基本的想法。

使用Flexbox对包含内联块子元素的元素进行收缩包装和居中

1 个答案: