html - 具有 flex 的内联响应式元素

Question

我有五个 div 需要内联和响应，以便在调整窗口大小时，它们会分成新的一行。因此。我需要它们均匀地水平分布。

我不会编辑 HTML，只能编辑 CSS。我试过很多东西。从基本显示:inline-block，到显示:flex。但我能完成的最好的事情是将它们内联，然后在调整浏览器大小时将它们混合在一起。我不是最擅长使用 flexbox 的人，我已经尝试通过 SO 寻找答案，但我应用的任何东西都不起作用。

这是我的代码大纲。目前，它均匀地分布了元素，但正如您所看到的，当窗口调整大小时，它们只是被粉碎在一起。当内联不再起作用时，我希望它们进入第二行。我猜是 Bootstrap 专栏之类的东西。有人可以看一下并告诉我该怎么做吗？

.container {
  display: flex;
  text-align: center;
  justify-content: space-between;
}

.item {
  background-color: green;
  border: 1px solid black;
}

<div class="container">
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
</div>

Answer 1

添加flex-wrap: wrap 并给它们一个min-width

.container {
  display: flex;
  flex-wrap: wrap;                         /*  added  */
  text-align: center;
  justify-content: space-between;
}

.item {
  background-color: green;
  border: 1px solid black;
  min-width: 100px;                         /*  added  */
}

<div class="container">
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
</div>

---

或者将 flex-wrap: wrap 与 flex-shrink: 0 结合使用，这将不允许它们收缩超出其内容

.container {
  display: flex;
  flex-wrap: wrap;                         /*  added  */
  text-align: center;
  justify-content: space-between;
}

.item {
  background-color: green;
  border: 1px solid black;
  flex-shrink: 0;                           /*  added  */
}

<div class="container">
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
  <div class="item">content goes here, just an example</div>
</div>