New line in flex container

Break to a new line flexbox

<div class="container">
  <div class="item"></div>
  <div class="break"></div> <!-- break -->
  <div class="item"></div>
</div>

<style>
  /* Inserting this collapsed row between two flex items will make 
     the flex item that comes after it break to a new row */
  .break {
	flex-basis: 100%;
	height: 0;
  }
</style>

Source: tobiasahlin.com

Similar codes

9 votes415 views5 answers
Html button size
CSS
13 votes417 views2 answers
Bootstrap Aligning images
CSS Bootstrap
15 votes348 views2 answers
Css center elment screen
CSS
70 votes354 views4 answers
Css vertical align center
CSS
1 vote360 views1 answer
Css spread children horizontally
CSS
0 vote307 views1 answer
Matsnackbar background color
CSS
0 vote344 views1 answer
Build a responsive real world website from scratch html css
CSS
2 votes353 views1 answer
Responsive background image
CSS
0 vote355 views1 answer
Css linear gradient 25% of page
CSS
0 vote395 views2 answers
How to convert directory SASS/SCSS to CSS via command line?
CSS