Flexbox type2

excercise differentiated with Flexbox type1 and Flexbox type2

by vaheed akhtar

HTML

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div class="inner">
    <div>Four</div>
    <div>Five</div>
  </div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

CSS

.wrapper {
  background: lightgray;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
.wrapper div {
  color:  red;
  margin: 5px;
  border: 1px solid green;
  width: 90px;
  text-align: center;
}
.inner {
  display: flex;
  flex-direction: column;
  flex-flow: row wrap;
}
.inner div {
  height: 70px;
}