Skip to content

Instantly share code, notes, and snippets.

@oliverlundquist

oliverlundquist/flexbox.html

Created August 18, 2016 13:25
Show Gist options
  • Save oliverlundquist/cad90c2d51b14bd1eb0d1d3c0c2d5db6 to your computer and use it in GitHub Desktop.
Save oliverlundquist/cad90c2d51b14bd1eb0d1d3c0c2d5db6 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Flexbox
Raw
flexbox.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body {
margin: 0;
height: 100%;
}
.container {
display:flex;
min-height: 100%;
}
.sidebar {
flex: 0 0;
width:100px;
background-color: hotpink;
/* for child element */
display:flex;
flex-flow: column nowrap;
}
.page {
flex: 1 1;
background-color: steelblue;
}
@media all and (max-width: 800px) {
.container {
flex-flow:column;
}
.sidebar {
justify-content: center;
flex-flow: row wrap;
width:auto;
}
}
.sidebar-button {
cursor:pointer;
margin: 10px;
padding:10px;
border: 2px solid pink;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="sidebar-button">button1</div>
<div class="sidebar-button">button2</div>
<div class="sidebar-button">button3</div>
<div class="sidebar-button">button4</div>
<div class="sidebar-button">button1</div>
<div class="sidebar-button">button2</div>
<div class="sidebar-button">button3</div>
<div class="sidebar-button">button4</div>
<div class="sidebar-button">button1</div>
<div class="sidebar-button">button2</div>
<div class="sidebar-button">button3</div>
<div class="sidebar-button">button4</div>
</div>
<div class="page">page</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment