skip to Main Content

I has a lot of code with the flex layout, and the container defined the wrap with nowrap, direction with row.

I don’t want to change the container style, but I want make the last item in a new line, Is there any good way ? keep the container flex direction row and flex wrap nowrap.

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

I had try the flex-direction with column,flex-wrap with wrap, it’s OK, but not I want, I hope to keep the nowrap and the row direction.

2

Answers


  1. Try this: (HTML is unchanged)

    .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%;
    }
    
    
    Login or Signup to reply.
  2. I found a way to achieve what you want, but it’s not an efficient way in my opinion. The best option is using CSS grid, here is my solution:

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search