Flexbox move column to next line

If you want to move a flexbox column to a next line then you can do the same by a combination of following rule:

  flex-basis: 100%;
  height: 0;

flex-basis 100% will move the column to the next line and will expand to full length of its container.

Let’s consider the below example where you want to put a line break after Item 3 and Item 5.

Initial HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

<style>

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.container .item {
  flex: 1;
  margin: 10px;
  background-color: #1e4462;
  color: #fff;
  padding: 10px;
  text-align: center;
}


</style>

The output of the above html will look like this:

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

In order to move Item 4 and Item 6 to the next line, you will have to add the following HTML:

<div class="line-break"></div>

Along with the following CSS:

.line-break {
  flex-basis: 100%;
  height: 0;
}

The complete HTML + CSS will look like this:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="line-break"></div> <!-- line break -->
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="line-break"></div> <!-- line break -->
  <div class="item">Item 6</div>
</div>

<style>
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.container .item {
  flex: 1;
  margin: 10px;
  background-color: #1e4462;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.line-break {
  flex-basis: 100%;
  height: 0;
}

</style>

Final Output: