css flex方向行和nowrap强制换行项

6bc51xsx 于 2023-03-24 发布在其他

关注(0)|答案(2)|浏览(200)

我有很多关于flex布局的代码，容器用nowrap定义了wrap，用row定义了direction。
我不想改变容器的样式，但是我想把最后一个项目放在一个新的行中，有什么好的方法吗？保持容器的弹性方向行和弹性换行。

<html>
<head>
<style>
.container {
   width: 400px;
   height: 312px;
   border: 1px solid tomato;
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
}

.item {
   width:100px;
   height:100px;
   line-height: 100px;
   border: 1px solid tomato;
   color: #000;
   margin: 1px 1px 1px 1px;
   text-align: center;
   
}

.break {
   width: 100%;
}

.container2 {
   width: 400px;
   height: 312px;
   border: 1px solid green;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
}

.item2 {
   width:100px;
   height:100px;
   line-height: 100px;
   border: 1px solid green;
   color: #000;
   margin: 1px 1px 1px 1px;
   text-align: center;
   
}

.break2 {
   width: 100%;
}

</style>
</head>
<body>
   <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item" id="xx">5</div>

      <!-- do not modify container class，how to cause line brerak？ -->
      <div class="break"></div>

      <div class="item" style="background:tomato;">6</div>
      </div>
   </div>

   </br></br>
   <div class="container2">
      <div class="item2">1</div>
      <div class="item2">2</div>
      <div class="item2">3</div>
      <div class="item2">4</div>
      <div class="item2">5</div>

      <div class="break2"></div>

      <div class="item2" style="background:green;">6</div>
   </div>
</body>
</html>

我试过用列的flex-direction，用wrap的flex-wrap，都还可以，但不是我想要的，我希望能保持现在和行的方向。

css

来源：https://stackoverflow.com/questions/75817262/flex-direction-row-and-nowrap-force-line-break-item

2条答案

按热度按时间

ie3xauqp1#

我找到了一个方法来实现你想要的，但在我看来这不是一个有效的方法。最好的选择是使用CSS网格，这里是我的解决方案：

.container {
  width: 400px;
  height: 312px;
  border: 1px solid tomato;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.item {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid tomato;
  color: #000;
  margin: 1px 1px 1px 1px;
  text-align: center;
  box-sizing: border-box;
}

.item:first-child>div {
  width: 100%;
  height: 100px;
  margin: 0;
  border: 1px solid tomato;
  text-align: center;
}

.container2 {
  width: 400px;
  height: 312px;
  border: 1px solid green;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.item2 {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid green;
  color: #000;
  margin: 1px 1px 1px 1px;
  text-align: center;
}

.break2 {
  width: 100%;
}

<div class="container">
  <div class="item">1
    <div class="item" style="background:tomato;">6</div>
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item" id="xx">5</div>
</div>

</br>
</br>
<div class="container2">
  <div class="item2">1</div>
  <div class="item2">2</div>
  <div class="item2">3</div>
  <div class="item2">4</div>
  <div class="item2">5</div>
  <div class="break2"></div>
  <div class="item2" style="background:green;">6</div>
</div>

赞(0）回复(0）举报 2023-03-24

tyky79it2#

试试这个：（HTML不变）

.container {
   width: 400px;
   height: 312px;
   border: 1px solid tomato;
   display: flex;
   /* change this to allow wrapping */
   flex-wrap: wrap;
   flex-direction: row;
}

.item {
   width:100px;
   height:100px;
   line-height: 100px;
   border: 1px solid tomato;
   color: #000;
   margin: 1px 1px 1px 1px;
   text-align: center;
}

.break {
   /* change the width property to a flex-basis property to expand the .break div */
   flex-basis: 100%;
}

.container2 {
   width: 400px;
   height: 312px;
   border: 1px solid green;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
}

.item2 {
   width:100px;
   height:100px;
   line-height: 100px;
   border: 1px solid green;
   color: #000;
   margin: 1px 1px 1px 1px;
   text-align: center;
   
}

.break2 {
   width: 100%;
}

赞(0）回复(0）举报 2023-03-24

我来回答

css flex方向行和nowrap强制换行项

2条答案

相关问题

热门标签

最新问答