Skip to content

Instantly share code, notes, and snippets.

@nathansmith

nathansmith/flex-layout-example.html

Last active February 24, 2022 17:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nathansmith/4a67cb804f39c2b17fba33b5a52ef7e7 to your computer and use it in GitHub Desktop.
Save nathansmith/4a67cb804f39c2b17fba33b5a52ef7e7 to your computer and use it in GitHub Desktop.
Download ZIP
Vertically centered layout example, using flexbox
Raw
flex-layout-example.html
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"
name="viewport"
/>
<title>Flex layout example</title>
<style>
/*
=======
Global.
=======
*/
*,
*:after,
*:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: sans-serif;
}
p {
margin-bottom: 20px;
}
/*
========
Wrapper.
========
*/
.wrapper {
background-color: #2e3f4f;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
/*
============
Flex layout.
============
*/
.flex-layout {
display: flex;
flex-direction: column;
min-height: 100%;
}
/*
=============================
Flex layout: header & footer.
=============================
*/
.flex-layout__header,
.flex-layout__footer {
/* Shrink to fit. */
flex: 0;
color: #fff;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
/*
==================
Flex layout: main.
==================
*/
.flex-layout__main {
/* Fill remaining height. */
flex: 1;
display: flex;
align-items: center;
}
.flex-layout__main__inner {
color: #000;
background-color: #fff;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
width: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="flex-layout">
<header class="flex-layout__header">
<p>
HEADER CONTENT HERE
</p>
</header>
<!-- .flex-layout__header -->
<main class="flex-layout__main">
<div class="flex-layout__main__inner">
<p>Example content, so that the main tag has some height.</p>
<p>etc.</p>
<p>etc.</p>
<p>etc.</p>
<p>etc.</p>
<p>etc.</p>
<p>etc.</p>
<p>etc.</p>
<p>etc.</p>
<p>etc.</p>
<p>etc.</p>
</div>
<!-- .flex-layout__main__inner -->
</main>
<!-- .flex-layout__main -->
<footer class="flex-layout__footer">
<p>
FOOTER CONTENT HERE
</p>
</footer>
<!-- .flex-layout__footer -->
</div>
<!-- .flex-layout -->
</div>
<!-- .wrapper -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment