index.html

<div class="container container--rigid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="container container--fluid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

layout with flexbox - boxes.markdown

layout with flexbox - boxes

A Pen by Andres Sainz de aja on CodePen.

License.

style.css

*{ box-sizing: border-box; }

.box{
  width: 100px;
  height: 100px;
}

.box:nth-child(4n+1) {
  background-color: #f1c40f;
}

.box:nth-child(4n+2) {
  background-color: #e74c3c;
}

.box:nth-child(4n+3) {
  background-color: #f39c12;
}

.box:nth-child(4n+4) {
  background-color: #d35400;
}

.container{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2em;
}

.container--rigid{
  width: 200px;
}

.container--fluid{}