Skip to content

Instantly share code, notes, and snippets.

@tyaslab

tyaslab/Old Flex Mini Reference

Last active September 23, 2016 09:20
Show Gist options
  • Save tyaslab/7fa51ba5d31d457d4698bcc92171d543 to your computer and use it in GitHub Desktop.
Save tyaslab/7fa51ba5d31d457d4698bcc92171d543 to your computer and use it in GitHub Desktop.
Download ZIP
Tested Old and New Flex
Raw
flex.css
.wrapper {
/* old syntax */
display: -webkit-box;
-webkit-box-align: center;
/* new syntax */
display: -webkit-flex;
display: flex;
align-items: center;
height: 200px;
background-color: green;
max-width: 100%;
width: 100%;
}
.item1 {
/* old syntax */
-webkit-box-flex: 1;
/* new syntax */
-webkit-flex: 1;
flex: 1;
background-color: orange;
height: 50px;
}
.item2 {
/* old syntax */
-webkit-box-flex: 1;
/* new syntax */
-webkit-flex: 1;
flex: 1;
height: 25px;
background-color: red;
}
Raw
index.html
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>Flexbox Colums test for Android < 4.4</h1>
<h2>Column with internal span's set to flex</h2>
<div class="wrapper">
<div class="item1">item</div>
<div class="item2">item</div>
</div>
</body>
</html>
Raw
Old Flex Mini Reference
display: box; or inline-box;
-moz-box-align
-moz-box-direction
-moz-box-ordinal-group
-moz-box-orient
-moz-box-pack
-moz-box-sizing
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment