pulsar-edit/pulsar
1
1
Fork 0
mirror of https://github.com/pulsar-edit/pulsar.git synced 2024-09-20 15:37:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

Nested flexbox layout that works (almost) in Chrome Canary but not current Atom

Browse Source
This commit is contained in:
Nathan Sobo 2012-03-19 12:14:09 -06:00
parent 509bac15b6
commit c15f2b3c3d
1 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
docs/flexbox-test.html Normal file
View File

@ -0,0 +1,59 @@
<html>
<style>
.vertical {
display: -webkit-flexbox;
-webkit-flex-flow: column;
overflow-y: visible;
height: 100%;
position: relative;
background-color: rgba(0, 0, 0, .3);
}
.horizontal {
display: -webkit-flexbox;
-webkit-flex-flow: row;
overflow-x: visible;
position: relative;
background-color: rgba(0, 0, 0, .3);
}
.horizontal > * {
width: -webkit-flex(1);
height: auto;
}
.vertical > * {
height: -webkit-flex(1);
}
.vertical > * + * {
border-top: 5px solid blue;
}
.horizontal > * + * {
border-left: 5px solid blue;
}
</style>
<body>
<div class="vertical">
<div class="editor">
</div>
<div class="horizontal">
<div class="editor">
</div>
<div class="vertical">
<div class="editor">
</div>
<div class="horizontal">
<div class="editor">
</div>
<div class="editor">
</div>
</div>
</div>
</div>
</div>
</body>
</html>