Skip to content

Instantly share code, notes, and snippets.

@oli

oli/dabblet.css

Last active July 13, 2016 10:34
Show Gist options
  • Save oli/13e8786e17164dbed60ffa0cd002fe81 to your computer and use it in GitHub Desktop.
Save oli/13e8786e17164dbed60ffa0cd002fe81 to your computer and use it in GitHub Desktop.
Download ZIP
flexbox width test
Raw
dabblet.css
/**
* flexbox width test
*/
.ruler {
width: 984px;
height: 6px;
background-color: #888;
}
.container {
width: 983px; /* 983 - 2px (inter-box spacing) = 981 / 3 = 327px */
}
.flexbox {
position: relative;
display: flex;
margin-top: 0.3em;
}
.box {
flex: 1 1 200px;
outline: 1px solid #ccc;
padding: 0.5em 0;
text-align: center;
margin-left: 1px;
}
.box:first-child {
margin-left: 0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="ruler"></div>
<div class="container">
<div class="flexbox">
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 3</div>
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment