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

问题描述 投票：0回答：1

当我调整浏览器窗口的大小时，我希望更改列数，而使用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>
html css css3 responsive-design flexbox
1个回答
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.