Skip to content

Instantly share code, notes, and snippets.

@tilleps

tilleps/gist:1072c5a062514ff984ccc0b531db47a8

Created January 26, 2020 02:17
Show Gist options
  • Save tilleps/1072c5a062514ff984ccc0b531db47a8 to your computer and use it in GitHub Desktop.
Save tilleps/1072c5a062514ff984ccc0b531db47a8 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Layout
Raw
gistfile1.txt
<body>
<div style="display: flex; flex-direction: column; min-height: 100vh; ">
<div style="flex-shrink: 0; overflow: auto;">
HEADER
</div>
<div style="flex-shrink: 0; overflow: auto;">
<div style="margin: 0 auto; align-self: center; overflow: auto; max-width: 420px; padding: 1rem 2rem; border-radius: 0.5rem; background: #eee;">
BANNER
</div>
</div>
<div style="flex: 1 0 auto; display: flex; align-items: flex-start;">
<div style="margin: 0 auto; align-self: center; overflow: auto; max-width: 420px;">
BODY
</div>
</div>
<div style="flex-shrink: 0; overflow: auto;">
FOOTER
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment