Flexbox responsive no jquery

In this example below you will see how to do a Flexbox responsive no jquery with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by eherna40, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright eherna40 ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div class="block one"></div>
  <div class="block two"></div>
  <div class="block three"></div>
</div>

/*Downloaded from https://www.codeseek.co/eherna40/flexbox-responsive-no-jquery-OOgKpd */
    * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}

html, body  { 
	height: 100%;
	width: 100%;
}

.container {
    width: 100%;
    height: auto;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 1024px;
    margin: 0 auto;
}

.block {
    width: 100%;
    height: 120px;
    padding: 20px 50px;
    margin: 10px 10px;
    border-radius: 10px;
}
.one{
    background: #1ce;
}
.two{
    background: #6a6;
}
.three{
    background: #de1e7e;
}

@media (min-width: 680px) {
    .container {
        flex-direction: row;
    }
}


/*Downloaded from https://www.codeseek.co/eherna40/flexbox-responsive-no-jquery-OOgKpd */
    

Comments