Skip to content

Instantly share code, notes, and snippets.

@olefrank
Created April 8, 2018 10:19
Show Gist options
  • Save olefrank/1316aec039b701d558e98bf2edcefc0f to your computer and use it in GitHub Desktop.
Save olefrank/1316aec039b701d558e98bf2edcefc0f to your computer and use it in GitHub Desktop.
Basic example of mobile-first RWD with flexbox
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
}
.container {
height: 90vh;
display: flex;
flex-direction: column;
padding: 10px;
background-color: beige;
}
@media(min-width: 680px) {
.container {
flex-direction: row;
}
}
.main {
background-color: lightblue;
margin-bottom: 20px;
}
@media(min-width: 680px) {
.main {
flex: 4;
margin-right: 20px;
margin-bottom: 0;
}
}
.aside {
flex: 1;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<h1>Welcome to Main</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum dolor totam corrupti illum, dicta quia corporis vero ab architecto, necessitatibus debitis ratione optio doloremque consequuntur fuga similique aut molestiae aspernatur?</p>
</div>
<div class="aside">
<h3>Buying options</h3>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, totam impedit cum dolorem.</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment