Question

我有一个居中的框，其中包含要并排显示的多个元素，可能包含在多行上。调整大小时，我希望盒子缩小。元素应保持相同的大小，并根据需要包装到其他行上。

我可以考虑一些处理方法（例如，将孩子设置为display: inline-block或float: left，或将父级设置为display: flex; flex-flow: row wrap;）。

在每种情况下，调整大小都会导致元素换行。但是，这会在行的最后一个元素和父元素的边缘之间留下间隙。在大多数情况下，这种行为是完全合理的，但在这里它会将元素视觉上偏离中心。

我喜欢它，如果我可以应用一些CSS魔法来拥有父盒＆＃34;缩小＆＃34;到子元素实际占用的宽度，忽略行尾空格。我希望display: table能在这里拯救我，但没有这样的运气。

我认识到解决方法是使用弹性框，指定justify-content: space-between（或不使用弹性框，只需text-align: justify）。这可以通过在元素之间分配未使用的空间来消除差距 - 但我并不想在项目之间留出空格。

以下是一些描述问题的图片：before resize / after resize

请参阅下面的代码段（我相信您需要全页运行才能让它响应调整大小）。

＆＃13;

body {
  padding: 50px;
  background: pink;
}

.outer {
  display: flex;
  flex-flow: row wrap;
  max-width: 600px;
  margin: 0 auto;
  padding: 10px;
  background: yellow;
}

.item {
  width: 100px;
  height: 100px;
}

.a {
  background: green;
}

.b {
  background: blue;
}

＆＃13;

<body>
  <div class="outer">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item a"></div>
    <div class="item b"></div>
  </div>
</body>

＆＃13;

Answer 1

我做了一些研究，以Michael_D的评论作为起点。

总结说使用纯CSS很难让容器缩小。

来自another post：

浏览器在初始级联上呈现容器。它没有当孩子包裹时回流文件。

当容器内容具有单个已知宽度时，最简单的解决方法可能是使用媒体查询来设置容器宽度。断点将出现在基本内容宽度的倍数处，直到最大列数。这描述并演示了here。

收缩父元素以消除包装行级子元素后留下的空白

1 个答案: