如何在 flexbox、row、no-wrap 中添加换行符？答案

【问题标题】：How to add a line break to flexbox, row, no-wrap?如何在 flexbox、row、no-wrap 中添加换行符？
【发布时间】：2018-08-09 14:06:45
【问题描述】：

当我调整浏览器窗口的大小时，我希望更改列数，而框可以灵活地使用flex-wrap: no-wrap;。

所以我认为如果我在divs 之后添加中断并使用@media 禁用/启用 CSS 中的一些中断，这可能是解决方案。 flex-wrap: no-wrap; 处于活动状态时，似乎无法添加换行符。

我是一个新手，我想学习最好的 CSS，因此，我正在尝试在不同情况下获得响应式结构。

我尝试过<br> 标签、space-white: pre; 和preline。我还尝试将其他父元素设置为display: inline-block;。但它们对我不起作用。如果可能的话，我只想用HTML 和CSS 来做这件事。但这不是强制性限制。

我的html和css：

* {
  margin: 0;
  padding: 0;
}

body{
  margin-left: 15px;
  margin-right: 15px;
}

.car{
  display: flex;
  max-width: 500px;
  min-width: 200px;
  height: 50px;
  border: 1px solid grey;
  margin: 5px 20px;
}

.carParent{
  display: flex;
  flex-direction: row;
  width: 1300px;
  border: 1px solid orange;
}

  <body>

<div class="carParent">
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
</div>

  </body>

【问题讨论】：

请添加您的代码示例以供参考，我们更容易提供帮助
不，如果不使用 flex-wrap: wrap; 尝试使用 float 或 inline-block，则无法更改 flexbox 中的行
@MateuszJuruś 我添加了代码。感谢您通知我。
@IsmailFarooq 我试过了，没用。
如果你想让 flex 项目 wrap 然后设置 flex-wrap 为 wrap，这就是规则的目的

标签： html css responsive-design flexbox

【解决方案1】：

为此，您有 flex-wrap:wrap，为了使其完全响应，我改进了您的代码。

* {
  margin: 0;
  padding: 0;
}

body {
  margin-left: 15px;
  margin-right: 15px;
}

.carParent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* try also: space-between or center */
  max-width: 1300px;
  margin: auto; /* to center in screen -- optional */
  border: 1px solid orange;
}

.car {
  border: 1px solid grey;
  margin: 5px 20px;
  padding: 1em
}

<body>

  <div class="carParent">
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
    <div class="car">
      <h3>SOME TEXT AND IMAGE</h3>
    </div>
  </div>

</body>

【讨论】：

我不想使用flex-wrap: wrap;，因为盒子不会响应。
那是谎言。我可以让你的盒子完全响应你的代码现在不是完全响应
那你能帮帮我吗？我希望它们能够响应并随着浏览器尺寸变窄而更改列数