Skip to content

Instantly share code, notes, and snippets.

@lhenze

lhenze/index.html

Last active August 29, 2015 14:11
Show Gist options
  • Save lhenze/41c59687626900039063 to your computer and use it in GitHub Desktop.
Save lhenze/41c59687626900039063 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox CSS - Elements which take up a third of their containers
Raw
index.html
<body >
<div class="wrapper">
<div class="row-wrapper">
<main ><h1>Adventures in Flexbox. Here we have one type of box which is a third of the width (tomato-colored) and one which stretches to fill up the rest.</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium quam nec felis sagittis facilisis. Ut at vulputate dui. Nunc eros erat, elementum sit amet viverra vitae, rhoncus at nunc. Vivamus euismod massa vel elit bibendum porta. Aenean laoreet tincidunt lectus, in ornare diam placerat eget. Nam vestibulum mi id purus viverra tincidunt. Nam posuere justo nec risus tristique, ut feugiat libero pharetra. Proin sed scelerisque nibh. Donec ullamcorper dui et massa condimentum aliquet. Morbi luctus est nec ipsum porta rutrum vel ut nulla..</main>
<aside >Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium quam nec felis sagittis facilisis.</aside>
</div>
<div class="row-wrapper">
<aside>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium quam nec felis sagittis facilisis.</aside>
<aside>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium quam nec felis sagittis facilisis.</aside>
<aside>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium quam nec felis sagittis facilisis.</aside>
</div>
</div>
</body>
Raw
ogLBYa.markdown
Raw
style.css
* { box-sizing: border-box; }
.wrapper {
background: gray;
padding: 10px;
margin-bottom: 30px;
}
.row-wrapper {
display: flex;
margin-left: -1%;
}
main {
box-shadow: inset 0px 0px 0px 3px white;
padding: 30px;
margin: 1% 0% 1% 1% ;
}
aside {
flex: 0 0 32.3333%;
margin: 1% 0% 1% 1% ;
box-shadow: inset 0px 0px 0px 3px white;
background-color: tomato;
padding: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment