Skip to content

Instantly share code, notes, and snippets.

@3363686

3363686/index.html

Created March 5, 2015 18:46
Show Gist options
  • Save 3363686/a4f5999ef5979cfb5228 to your computer and use it in GitHub Desktop.
Save 3363686/a4f5999ef5979cfb5228 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox examples // source http://jsbin.com/vafoyeqewi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>Flexbox examples</title>
<style id="jsbin-css">
.flex-container {
display: flex;
}
.flex-item:nth-child(4) {
order: -1;
}
/* Decorations
-------------------- */
BODY {
padding: 20px;
background: white;
counter-reset: flex-item-counter;
}
.flex-container {
padding: 10px;
background: gold;
border-radius: 10px;
}
.flex-item {
margin: 10px;
padding: 5px;
background: tomato;
border-radius: 5px;
border: 1px solid #FFF;
}
.flex-item:before {
content: counter(flex-item-counter);
counter-increment: flex-item-counter;
display: block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
margin: 5px auto;
text-align: center;
background: ivory;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">
Curabitur ac vestibulum mi
</div>
<div class="flex-item">
Curabitur ac vestibulum miac vestibulum mi
</div>
<div class="flex-item">
In viverra dapibus
</div>
<div class="flex-item">
Fusce tincidunt diam et
</div>
<div class="flex-item">
Nulla in dui vel est
</div>
<div class="flex-item">
at diam in lobortis
</div>
</div>
<script id="jsbin-source-css" type="text/css">.flex-container {
display: flex;
}
.flex-item:nth-child(4) {
order: -1;
}
/* Decorations
-------------------- */
BODY {
padding: 20px;
background: white;
counter-reset: flex-item-counter;
}
.flex-container {
padding: 10px;
background: gold;
border-radius: 10px;
}
.flex-item {
margin: 10px;
padding: 5px;
background: tomato;
border-radius: 5px;
border: 1px solid #FFF;
}
.flex-item:before {
content: counter(flex-item-counter);
counter-increment: flex-item-counter;
display: block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
margin: 5px auto;
text-align: center;
background: ivory;
border-radius: 50%;
}
</script>
</body>
</html>
Raw
jsbin.vafoyeqewi.css
.flex-container {
display: flex;
}
.flex-item:nth-child(4) {
order: -1;
}
/* Decorations
-------------------- */
BODY {
padding: 20px;
background: white;
counter-reset: flex-item-counter;
}
.flex-container {
padding: 10px;
background: gold;
border-radius: 10px;
}
.flex-item {
margin: 10px;
padding: 5px;
background: tomato;
border-radius: 5px;
border: 1px solid #FFF;
}
.flex-item:before {
content: counter(flex-item-counter);
counter-increment: flex-item-counter;
display: block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
margin: 5px auto;
text-align: center;
background: ivory;
border-radius: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment