-
-
Save joellesenne/b6b67c0c6d9d87cd509ba57d5fd3ece2 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/pisuxex
This file contains hidden or 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 hidden or 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; | |
| } | |
| } |
This file contains hidden or 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