-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathtestLayout.html
29 lines (29 loc) · 1.32 KB
/
testLayout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test Layout</title>
</head>
<body style="height: 100vh; margin:0; background:purple">
<div id="main" style="height:100%; background:darkGray; display:flex; flex-flow:column">
<h4 style="color: coral; flex:flex-basis">
This is experimental software. Functionality can change rapidly and without
notice. Bugs are very likely.
<a href="https://goo.gl/forms/uXouJRtWRVEcTA983">Contact us.</a>
</h4>
<div>
<label style="font-size: 1.25em;font-weight: 700;color: white;background-color: rgb(158, 60, 60);display: inline-block;padding: 15px;">Button</label>
</div>
<p></p>
<div style="flex:1; background:darkGreen; display:flex; flex-flow:row">
<div style="order:1; flex:flex-basis; background:yellow">Table</div>
<div style="order:1; flex:flex-basis; background:pink; width:10px"></div>
<div style="order:2; flex:1; background:red; overflow:visible">
<canvas style="width:100%; height:100%; background:blue;"></canvas>
</div>
<div style="order:3; flex:flex-basis; background:pink; width:10px"></div>
</div>
<div style="flex:flex-basis; background:pink; height:10px"></div>
</div>
</body>
</html>