Created
August 18, 2016 08:05
-
-
Save anonymous/d67104392b616de562404ad608caf9fe to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/pisuxex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
body { | |
display: flex; | |
flex-direction: column; | |
min-height: 100vh; | |
} | |
main { | |
display: flex; | |
flex: 1 1 auto; /* flex-grow devient 1 */ | |
} | |
nav, | |
aside { | |
width: 10em; | |
} | |
nav { | |
order: -1; | |
} | |
.content { | |
flex: 1; | |
} | |
/* Responsive */ | |
@media (max-width: 370px) { | |
main, | |
nav, | |
aside, | |
.content { | |
display: block; | |
width: auto; | |
} | |
} | |
/* Responsive (variante) */ | |
@media (max-width: 370px) { | |
main { | |
flex-direction: column; | |
} | |
nav, | |
aside { | |
width: auto; | |
} | |
.content { | |
flex-basis: auto; /* pour écraser la valeur 0 */ | |
} | |
nav { | |
order: 1; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<header> | |
<h1>Mon super gabarit!</h1> | |
</header> | |
<main class="wrapper"> | |
<section class="content"> | |
<h2>Flexbox c'est la vie, Hopla!</h2> | |
<p>Lorem Elsass ipsum lacus leverwurscht Wurschtsalad mamsell Gal. | |
gewurztraminer Carola tellus rucksack vielmols, Gal!</p> | |
</section> | |
<nav id="navigation"> | |
<a href="#">Salade</a> | |
<a href="#">Tomate</a> | |
<a href="#">Oignon</a> | |
<a href="#">Choucroute</a> | |
<a href="#">Picon bière</a> | |
</nav> | |
<aside> | |
<h2>Aside content</h2> | |
<p>Lorem Elsass ipsum lacus leverwurscht Wurschtsalad mamsell Gal.</p> | |
</aside> | |
</main> | |
<footer>Hopla le pied de pache!</footer> | |
<script id="jsbin-source-css" type="text/css">body { | |
display: flex; | |
flex-direction: column; | |
min-height: 100vh; | |
} | |
main { | |
display: flex; | |
flex: 1 1 auto; /* flex-grow devient 1 */ | |
} | |
nav, | |
aside { | |
width: 10em; | |
} | |
nav { | |
order: -1; | |
} | |
.content { | |
flex: 1; | |
} | |
/* Responsive */ | |
@media (max-width: 370px) { | |
main, | |
nav, | |
aside, | |
.content { | |
display: block; | |
width: auto; | |
} | |
} | |
/* Responsive (variante) */ | |
@media (max-width: 370px) { | |
main { | |
flex-direction: column; | |
} | |
nav, | |
aside { | |
width: auto; | |
} | |
.content { | |
flex-basis: auto; /* pour écraser la valeur 0 */ | |
} | |
nav { | |
order: 1; | |
} | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
display: flex; | |
flex-direction: column; | |
min-height: 100vh; | |
} | |
main { | |
display: flex; | |
flex: 1 1 auto; /* flex-grow devient 1 */ | |
} | |
nav, | |
aside { | |
width: 10em; | |
} | |
nav { | |
order: -1; | |
} | |
.content { | |
flex: 1; | |
} | |
/* Responsive */ | |
@media (max-width: 370px) { | |
main, | |
nav, | |
aside, | |
.content { | |
display: block; | |
width: auto; | |
} | |
} | |
/* Responsive (variante) */ | |
@media (max-width: 370px) { | |
main { | |
flex-direction: column; | |
} | |
nav, | |
aside { | |
width: auto; | |
} | |
.content { | |
flex-basis: auto; /* pour écraser la valeur 0 */ | |
} | |
nav { | |
order: 1; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment