Skip to content

Instantly share code, notes, and snippets.

@anhldbk
Created August 3, 2017 05:50
Show Gist options
  • Save anhldbk/a5b6a171d0dead8cc5ea08b5a3443e39 to your computer and use it in GitHub Desktop.
Save anhldbk/a5b6a171d0dead8cc5ea08b5a3443e39 to your computer and use it in GitHub Desktop.
Flexbox
<html>
<head>
<style>
#bar {
background-color: #eee;
height: 600px;
width: 300px;
display: flex;
flex-direction: column;
justify-content: flex-start
}
#hi {
width: 300px;
background-color: orange;
margin-top: auto;
flex: 1;
}
#lo {
height: 80px;
width: 300px;
align-self: flex-end;
background-color: red;
}
</style>
</head>
<body>
<h1>Hello</h1>
<div id="bar">
<div id="hi"></div>
<div id="lo"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment