Login / Join
Flex layout
submitted on 19/05/2015 by
Codicode
+ infos
Config
Embed
Share
Flex layout
by
Codicode
Flex layout
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="2c9" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<body class="HolyGrail"> <header>This is my header</header> <div class="HolyGrail-body"> <main class="HolyGrail-content">HolyGrail-content</main> <nav class="HolyGrail-nav">HolyGrail-nav</nav> <aside class="HolyGrail-ads">HolyGrail-ads</aside> </div> <footer>This is my footer</footer> </body>
CSS
body{ background-color:#fff; } .HolyGrail { display: flex; min-height: 100vh; flex-direction: column; } .HolyGrail-body { display: flex; flex: 1; } .HolyGrail-content { flex: 1; } .HolyGrail-nav, .HolyGrail-ads { /* 12em is the width of the columns */ flex: 0 0 8em; } .HolyGrail-nav { /* put the nav on the left */ order: -1; } .HolyGrail, .HolyGrail-body { display: flex; flex-direction: column; } .HolyGrail-nav { order: -1; } @media (min-width: 768px) { .HolyGrail-body { flex-direction: row; flex: 1; } .HolyGrail-content { flex: 1; } .HolyGrail-nav, .HolyGrail-ads { /* 12em is the width of the columns */ flex: 0 0 12em; } }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact