How to make a flex responsive template

Thursday 16th, Mar, 2017 | # # #

Demo

The flexible box layout is a way of using CSS’s display property in a whole new manner. Block elements stack vertically while inline elements stack horizontally(until they break onto a new line).

Flexbox elements can stack vertically or horizontally based on your setup. They can be evenly spaced across the page or squeezed tight up against each other. The point is offering more control to developers who want to build naturally responsive layouts.

HTML


<body>
<header>
<h2>HEADER</h2>
</header>

 <div class="content_wrapper">
 <section class="main">

 </section>

 <aside class="sidebar">
 <h3>Sidebar</h3>
 </aside>
 </div>

 <footer>
 <h3>Footer</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 </footer>



</body>

CSS



/* Header */

header{
 color: #ef5350;
 background-color:#FC0;
 display: flex;
 justify-content: space-between;
}



/* Main Section */

.content_wrapper {
 display: flex;
}

.main {
 text-align: center;
 margin-right: 60px;
 background-color:#C9F;
 
 flex: 3;
}



/* Sidebar */

.sidebar {
 padding: 20px;
 background-color:#6CF;
 flex: 1;
}

/* Footer */

footer {
 color: #ef5350;
 text-align: center;
 padding: 20px 0;
 margin-top: 60px;
}

footer p {
 color: #777;
 font-size: 12px;
 padding: 10px;
}


@media (max-width: 600px) {
 .content_wrapper {
 flex-direction: column;
 }

 .main {
 margin-right: 0;
 margin-bottom: 60px;
 }
}


Close X

Best Vector Post