Flexbox: Performance issues

In this example below you will see how to do a Flexbox: Performance issues with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Ryan Seddon, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ryan Seddon ©
  • HTML
  • CSS
  • JavaScript
    <figure id="demo" class="flex-container demo">
  <div class="flex-item"><span>Lorem ipsum</span></div>
  <div class="flex-item"><span>dolor</span></div>
  <div class="flex-item"><span>sit</span></div>
  <div class="flex-item"><span>amet</span></div>
  <div class="flex-item"><span>consectetur</span></div>
  <div class="flex-item"><span>adipiscing elit</span></div>
  <div class="flex-item"><span>nunc</span></div>
  <div class="flex-item"><span>enim</span></div>
  <div class="flex-item"><span>nunc</span></div>
  <div class="flex-item"><span>volutpat eget</span></div>
  <div class="flex-item"><span>aliquam</span></div>
  <div class="flex-item"><span>nec</span></div>
  <div class="flex-item"><span>accumsan rutrum</span></div>
  <div class="flex-item"><span>bacon</span></div>
  <div class="flex-item"><span>maecenas</span></div>
  <div class="flex-item"><span>nunc</span></div>
  <div class="flex-item"><span>voldermere</span></div>
  <div class="flex-item"><span>it</span></div>
  <div class="flex-item"><span>las</span></div>
  <div class="flex-item"><span>quid</span></div>
  <div class="flex-item"><span>tostidos</span></div>
  <div class="flex-item"><span>gray</span></div>
</figure>

<button id="loadmore" class="btn">Load more</button>

/*Downloaded from https://www.codeseek.co/ryanseddon/flexbox-performance-issues-lgpte */
    html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.flex-item span {
  display:inline-block;
  padding:1rem 1.5rem;
  align-self:center;
}

.flex-container {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    flex-flow: row wrap;
   -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
  height: 100%;
  margin: 0;
}

.flex-item {
    -webkit-flex: 1 auto;
    -moz-flex: 1 auto;
    flex: 1 auto;
  background: hsl(300,50%,75%);
  display:inline-flex;
  position:relative;
  justify-content:center;
  margin:.25rem;
  font-size:1.5em;
  overflow:hidden;
}

.btn {
  width: 100%;
  background:hsl(385,50%,75%);
  font-weight: 700;
  border: 0;
  padding: 10px;
}


/*Downloaded from https://www.codeseek.co/ryanseddon/flexbox-performance-issues-lgpte */
    var btn = document.querySelector('#loadmore'),
    container = document.querySelector('.flex-container');

btn.addEventListener('click', function() {
  var html = container.innerHTML;
  
  container.innerHTML += html;
}, false);

Comments