Skip to content

Instantly share code, notes, and snippets.

@dbarjs

dbarjs/flex.html

Created July 11, 2016 18:53
Show Gist options
  • Save dbarjs/b3733fb68ef4e70c021639737a93cbfa to your computer and use it in GitHub Desktop.
Save dbarjs/b3733fb68ef4e70c021639737a93cbfa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flex.html
<!DOCTYPE html>
<html lang="pt-br">
<meta charset="UTF-8">
<title>Flex</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<script src="dist/js/villa.min.js"></script>
<link rel="stylesheet" href="dist/css/villa.min.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="dist/css/material-colors.css"/>
<link rel="stylesheet" type="text/css" href="dist/css/villa-cross.min.css"/>
<script src="dist/js/html5shiv.js"></script>
<script src="dist/js/html5shiv-printshiv.js"></script>
<script src="dist/js/classList.min.js"></script>
<![endif]-->
<style>
.a {
/*
d:f
ai:c
ai:fe
ai:fs
ai:s
ai:b
jc:c
jc:fe
jc:fs
jc:sa
jc:sb
ac:c
ac:fe
ac:fs
ac:sa
ac:sb
fxf
*/
width: 100%;
}
.b {
height: 50px;
min-width: 21em;
}
.c {
border-radius: 50%;
flex: 1;
min-height: 25%;
min-width: 2em;
}
</style>
<body>
<div class="a red flex flex-wrap justify-center align-center">
<!--
flex
flex-column == flex
flex-wrap == flex
flex-column-wrap == flex
-->
<div class="b blue flex flex-wrap grow-1"></div>
<div class="b blue-400 grow-1"></div>
<div class="b blue-300 grow-1"></div>
<div class="b blue-200 grow-1"></div>
<div class="flex"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment