A Pen by A Non Ymous.

Demo-Flexbox-1.markdown

Demo Flexbox 1

Forked from Hugo Giraudel's Pen Demo Flexbox 1.

A Pen by A Non Ymous on CodePen.

License.

index.html

<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>

style.scss

@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;
  }
  
}