Skip to content

Instantly share code, notes, and snippets.

@Rolograaf

Rolograaf/jsbin.kazudepu.css

Created April 27, 2014 15:46
Show Gist options
  • Save Rolograaf/11348894 to your computer and use it in GitHub Desktop.
Save Rolograaf/11348894 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox demonstration
Raw
jsbin.kazudepu.css
.flex
{
/* basic styling */
width: 350px;
height: 300px;
border: 1px solid #555;
font: 14px Arial;
/* flexbox setup */
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
}
.flex > div
{
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
width: 30px; /* To make the transition work nicely.
(Transitions to/from
"width:auto" are buggy in Gecko and Webkit, at least.
See http://bugzil.la/731886 for more info.) */
-webkit-transition: width 0.7s ease-out;
transition: width 0.7s ease-out;
}
/* colors */
.flex > div:nth-child(1){ background : #009246; }
.flex > div:nth-child(2){ background : #F1F2F1; }
.flex > div:nth-child(3){ background : #CE2B37; }
.flex > div:hover
{
width: 200px;
}
Raw
jsbin.kazudepu.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Flexbox demonstration" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>Flexbox nuovo</p>
<div class="flex">
<div>uno</div>
<div>due</div>
<div>tre</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment