Last active
November 6, 2019 21:03
-
-
Save joshmedeski/0c92512c68b3d64c172231a3f15a1cdc to your computer and use it in GitHub Desktop.
Perfect Base Layout with Flexbox
This file contains 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 lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<title>Flexbox Layout</title> | |
<style> | |
body { | |
margin: 0; | |
} | |
.layout { | |
background-color: black; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
height: 100vh; | |
} | |
.layout-main { | |
background-color: white; | |
padding: 20px; | |
margin: 100px; | |
} | |
.layout-section { | |
color: white; | |
padding: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="layout"> | |
<header class="layout-section">Header</header> | |
<main class="layout-main">Main Content</main> | |
<footer class="layout-section">Footer</footer> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment