Question

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

我无法编辑HTML，只能编辑CSS。而且我尝试了很多东西。从基本显示：内联块，到显示：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>

具有flex的内联响应元素

1 个答案: