How to Specify Line Breaks in a Multi-Line Flexbox Layout

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

Flexbox item wrap to a new line

If you look at this great answer you'll notice that the only cross-browser way (without 2 line break limit) is inserting 100%-width empty blocks ("line-breaks"). So for similar markup this will look like

.flex {  display: flex;  flex-wrap: wrap;  border: 2px solid red;}
.item {  width: 50px;  height: 50px;  margin: 5px;  border: 2px solid blue;}
.line-break {  width: 100%;}

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

.flex-container {  display: flex;  flex-wrap: wrap;}.flex-container::after {  content: '';  width: 100%;}.flex-item:last-child { /* or `:nth-child(n + 4)` */  order: 1;}

<div class="flex-container">  <div class="flex-item">1</div>  <div class="flex-item">2</div>  <div class="flex-item">3</div>  <div class="flex-item">4</div></div>

.header-title {
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 750px; 
}

& .header-title h1,
.header-title h2 {
    width: 100%;
}