Skip to content

Instantly share code, notes, and snippets.

@kvasdopil

kvasdopil/dashboard.html

Created September 5, 2016 17:19
Show Gist options
  • Save kvasdopil/f493495cf86539888cb52ede309084f8 to your computer and use it in GitHub Desktop.
Save kvasdopil/f493495cf86539888cb52ede309084f8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dashboard.html
<!DOCTYPE html>
<html>
<head>
<title>flexbox test</title>
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-wrap: wrap;
flex: 1;
}
.fixed {
flex-wrap: wrap;
max-width: 800px;
display: flex;
justify-content: center;
}
.cell {
margin: 1rem;
min-width: 150px;
max-width: 200px;
height: 100px;
background-color: lightgray;
flex: 1;
}
.small {
margin: 1rem;
background-color: lightgray;
flex: 1;
min-width: 200px;
min-height: 200px;
}
.big {
margin: 1rem;
background-color: lightgray;
flex: 1;
min-width: 30%;
min-height: 200px;
}
</style>
</head>
<body>
<div class='fixed'>
<div class='cell'>cell</div>
<div class='cell'>cell</div>
<div class='cell'>cell</div>
<div class='cell'>cell</div>
<div class='cell'>cell</div>
<div class='cell'>cell</div>
<div class='cell'>cell</div>
<div class='cell'>cell</div>
</div>
<div class='small'>
small div
</div>
<div class='big'>
big div
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment