Skip to content

Instantly share code, notes, and snippets.

@oli oli/dabblet.css
Last active Jul 13, 2016

Embed
What would you like to do?
flexbox width test
/**
* 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;
}
<!-- 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>
// alert('Hello world!');
{"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
You can’t perform that action at this time.