CodePen Embed - FlexBox Example 2 : flex-grow

<div class="box">
  <div class="blue"></div>
  <div class="green"></div>
    <div class="blue"></div>
  <div class="green"></div>
 <div class="blue"></div>
    <div class="green"></div>
  <div class="blue"></div>
</div>

.box {
  display: flex;
  align-items: center;

  justify-content: center;
  height: 200px;
  
  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box div {

  margin:5px;

}

.blue {
  flex-grow:2;
    background-color:blue;
}

.green {
  flex-grow:4;
    background-color:green;
}

This Pen is owned by Cezary Walenciuk on CodePen.

See more by @Crezber on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.