Forked from Hugo Giraudel's Pen Demo Flexbox 1.
A Pen by A Non Ymous on CodePen.
Forked from Hugo Giraudel's Pen Demo Flexbox 1.
A Pen by A Non Ymous on CodePen.
<div class="block1"> | |
<ul class="flex-container"> | |
<li class="flex-item">1</li> | |
<li class="flex-item">2</li> | |
<li class="flex-item">3</li> | |
<li class="flex-item">4</li> | |
<li class="flex-item">5</li> | |
</ul> | |
</div> | |
<div class="block2"> | |
<ul class="flex-container"> | |
<li class="flex-item">1</li> | |
<li class="flex-item hideit">2</li> | |
<li class="flex-item hideit">3</li> | |
<li class="flex-item hideit">4</li> | |
<li class="flex-item">5</li> | |
</ul> | |
</div> | |
<div class="block3"> | |
<ul class="flex-container"> | |
<li class="flex-item">1</li> | |
<li class="flex-item hideit">2</li> | |
<li class="flex-item hideit">3</li> | |
<li class="flex-item hideit">4</li> | |
<li class="flex-item">5</li> | |
</ul> | |
</div> | |
<div class="block4"> | |
<ul class="flex-container"> | |
<li class="flex-item">1</li> | |
<li class="flex-item hideit">2</li> | |
<li class="flex-item hideit">3</li> | |
<li class="flex-item hideit">4</li> | |
<li class="flex-item">5</li> | |
</ul> | |
</div> | |
<div class="block5"> | |
<ul class="flex-container"> | |
<li class="flex-item">1</li> | |
<li class="flex-item hideit">2</li> | |
<li class="flex-item hideit">3</li> | |
<li class="flex-item hideit">4</li> | |
<li class="flex-item">5</li> | |
</ul> | |
</div> | |
<div class="block6"> | |
<ul class="flex-container"> | |
<li class="flex-item">1</li> | |
<li class="flex-item">2</li> | |
<li class="flex-item hideit">3</li> | |
<li class="flex-item">4</li> | |
<li class="flex-item">5</li> | |
</ul> | |
</div> | |
<div class="block7"> | |
<ul class="flex-container"> | |
<li class="flex-item">1</li> | |
<li class="flex-item">2</li> | |
<li class="flex-item">3</li> | |
<li class="flex-item">4</li> | |
<li class="flex-item">5</li> | |
</ul> | |
</div> | |
@import "compass/css3"; | |
.flex-container { | |
padding: 0; | |
margin: 0; | |
list-style: none; | |
display: -webkit-box; | |
display: -moz-box; | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
-webkit-flex-flow: row wrap; | |
justify-content: space-between; | |
} | |
.flex-item { | |
background: tomato; | |
padding: 5px; | |
width: 100px; | |
height: 100px; | |
margin-top: 10px; | |
line-height: 100px; | |
color: white; | |
font-weight: bold; | |
font-size: 3em; | |
text-align: center; | |
} | |
.hideit { | |
// display: none; | |
visibility: hidden; | |
} | |
@media (max-width: 700px) { | |
.hideit { | |
display: none; | |
} | |
.flex-container { | |
-webkit-flex-flow: column wrap; | |
justify-content: center; | |
align-items: center; | |
} | |
} | |