html - 如何创建一个包裹和弹性项目的 FlexBox 布局是流畅但相等的

Question

如果这是一个重复的问题，我们深表歉意；我确实搜索了很多，但有很多 FlexBox 问题（这是一个令人困惑的话题！）。无论如何，我正在尝试创建一排具有最小尺寸的水平框，因此当一行中容纳的太多时会换行。这部分我已经完成了。

问题是，似乎不可能同时让弹性项目流动，以便它们填满父容器并让它们在行之间保持相同的宽度。

#container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1;
  min-width: 150px;
  border: 1px solid #ccc;
  background-color: #eee;
  margin: 12px;
  padding: 4px;
}

<div id="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
</div>

标签： htmlcssflexbox