Skip to content

Instantly share code, notes, and snippets.

@sethladd

sethladd/index.html

Last active May 22, 2017 04:02
Show Gist options
  • Save sethladd/04cbe138510bed9a2e15344011830d2d to your computer and use it in GitHub Desktop.
Save sethladd/04cbe138510bed9a2e15344011830d2d to your computer and use it in GitHub Desktop.
Download ZIP
layout with flexbox
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>Top Nav</header>
<div class="layout-body">
<main>
<h1>This is the main content</h1>
<p>
Lorem ipsum dolor sit amet, ne vix utinam luptatum facilisis. In mollis aliquid fierent usu. Ex ubique liberavisse qui, pro
ne rebum tamquam. Ad usu tale ponderum sapientem, sed agam audiam et, diam virtute eum ut. Mei ea oporteat verterem,
nec te utamur latine commodo, appareat tractatos scribentur his ad.
</p>
<p>
Nec graecis eligendi eu. Mea ad saepe consectetuer, mel civibus fastidii eu. Diam probo argumentum vel ad, an diam denique
ius. Nihil legimus interesset ad sea, alienum deleniti antiopam vix ut, per in solet concludaturque. Assum cetero
pri ne, oblique admodum volutpat duo ex, ne mel option utroque democritum.
</p>
<p>
Vim causae atomorum necessitatibus ei. Vim te splendide abhorreant, cu prima ceteros iudicabit cum. Te feugait deseruisse
eos. Nec ad mundi denique, duo modus gloriatur repudiandae eu. Duis dictas an eum.
</p>
<p>
Usu modus idque accusam ea, ne enim fugit aliquid mei, eos ex probo detraxit. Eu usu menandri perpetua, diam accusata eloquentiam
eu vel. Eum in phaedrum sententiae consetetur, mundi viderer in vix. At qui eripuit volutpat ullamcorper, postea
interesset cu cum. Assum mediocrem similique at pri, eu cum dicam sententiae, ne decore tamquam quo.
</p>
<p>
Sea propriae comprehensam eu, adhuc melius senserit qui ad. Vim volumus corpora at, et per dico accusam. Cu simul explicari
argumentum vel. No veri choro ornatus duo.
</p>
</main>
<nav class="left-nav">
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</nav>
<aside class="right-toc">
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</aside>
</div>
<footer>
<div>
Footer one
</div>
<div>
Footer two
</div>
<div>
Footer three
</div>
</footer>
</body>
</html>
Raw
styles.css
html, body {
padding: 0;
margin: 0;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header, footer {
flex: none; /* 2 */
background-color: yellow;
display: flex;
flex-flow: row wrap;
}
header {
position: fixed;
width: 100%;
height: 36px;
}
footer {
justify-content: space-around;
padding: 64px 16px 64px 16px;
}
.layout-body {
display: flex;
flex: 1 0 auto;
flex-direction: column;
margin-top: 36px;
}
main {
flex: 1;
}
.left-nav, .right-toc {
flex: 0 0 auto;
}
.left-nav {
/* put the nav on the left */
order: -1;
}
@media (min-width: 768px) {
.layout-body {
flex-direction: row;
}
main {
flex: 1;
}
.left-nav, .right-toc {
/* 12em is the width of the columns */
flex: 0 0 12em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment