Question

当我调整浏览器窗口的大小时，我希望更改列的数量，同时使用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>

Answer 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>

如何为flexbox，row，no-wrap添加换行符？

1 个答案: