Question 45960 in CSS Question posted in
Some basic documentation can be found here.

flex direction row and nowrap force line break item – CSS

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.

Tags:

2

Answers


  1. 0

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

    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