列中的div，扩展为父宽度

Question

我一直在寻找一种列出多个div的方法，如果它们不合适，可以将它们移动到一个新行。 有些图片可能会更好地说明我的需求：

div（红色框）的高度和宽度是恒定的。

Bootstrap不是一个选项。

这些方框也必须居中，所以当你开始增加父宽度时，它们应该自动居中，而不会在侧面留下间隙。

感谢您指点我正确的方向。

Answer 1

使用CREATE UNIQUE INDEX name_index ON name_table (any incorrect expression)? ：

＆＃13;

＆＃13;

select *
from pg_indexes
where tablename not like 'pg%'
order by tablename;

＆＃13;

display: inline-block

＆＃13;

＆＃13;

＆＃13;

另外，请参阅this小提琴。

要仅对容器居中，可以使用.box { display: inline-block; width: 250px; height: 100px; background-color: red; } .boxWrapper { text-align: center; }：

＆＃13;

＆＃13;

<div class="boxWrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

display: grid

＆＃13;

＆＃13;

＆＃13;

或者看this小提琴。

然而，IE不支持此功能。但是如果不使用CSS Grid，我无法想出一个不同的方法。