Created
February 14, 2018 04:28
-
-
Save noisemaster/2798a2f82d465c9937b0adb043051023 to your computer and use it in GitHub Desktop.
Flexbox columned interface
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"> | |
<style> | |
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); | |
body { | |
font-family: 'Roboto'; | |
height: 100vh; | |
margin: 0; | |
} | |
section { | |
display: flex; | |
flex-flow: row; | |
flex: 1 1 auto; | |
} | |
header { | |
flex: 0 1 2em; | |
} | |
footer { | |
flex: 0 1 40px; | |
} | |
.modules { | |
display: flex; | |
overflow-x: auto; | |
width: calc(100% - 350px); | |
} | |
.chat { | |
width: 350px; | |
overflow-y: auto; | |
} | |
.con { | |
display: flex; | |
flex-flow: column; | |
height: 100%; | |
} | |
.box { | |
flex-shrink: 0; | |
background-color: salmon; | |
padding: 10px; | |
margin: 10px; | |
width: 300px; | |
} | |
</style> | |
<script> | |
window.onload = function () { | |
document.getElementById("add").onclick = function () { | |
const elem = document.getElementsByClassName('modules')[0]; | |
console.log(elem); | |
elem.innerHTML += '<div class="box"><h2>Test</h2></div>' | |
} | |
} | |
</script> | |
<title>Column test</title> | |
</head> | |
<body> | |
<div class="con"> | |
<header> | |
<h1>Site</h1> | |
<button id="add" onclick="addBox"> add box </button> | |
</header> | |
<section> | |
<div class="modules"> | |
<div class="box"><h2>Test</h2></div> | |
<div class="box"><h2>Test</h2></div> | |
<div class="box"><h2>Test</h2></div> | |
</div> | |
<div class="chat"> | |
<div> | |
<ul> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
<li>Chat Message</li> | |
</ul> | |
</div> | |
</div> | |
</section> | |
<footer> | |
<small>timeline and other fun</small> | |
</footer> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment