Ilence Ye

如下示例，item 可以通过 JavaScript 来控制渲染或不渲染，换句话说，item 的数量是不确定的 (可能是 1 个 或 2 个等等)。

<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

我的需求是：需要将所有 item 排在一行里，整体在 container 里居中对齐。此外，每个 item 限定最大宽度为 40rem，宽度需要尽可能拉伸到 40rem，保证每个 item 等宽。

那么如何实现这个布局呢？如下：

.container {
  display: flex;
  justify-content: center;
}

.item {
  max-width: 40rem;
  flex: 1;
}

这里的关键是：

一是，用 Flexbox 来实现。

二是，通过 justify-content: center; 实现整体在 container 里居中对齐。

三是，通过 max-width: 40rem; 和 flex: 1; 的配合实现每个 item 限定最大宽度为 40rem，宽度需要尽可能拉伸到 40rem。