Skip to content

Instantly share code, notes, and snippets.

@abdullah353

abdullah353/flex_boilerplate.html

Created March 7, 2014 10:42
Show Gist options
  • Save abdullah353/9409288 to your computer and use it in GitHub Desktop.
Save abdullah353/9409288 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Flex Example
Raw
flex_boilerplate.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.flex
{
/* basic styling */
width: 350px;
height: 200px;
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;
}
</style>
</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