flex stuff

by Gwyn Milcote

HTML

<div class='cont'>
  <div class='item item-1 width-full'>1</div>
  <div class='item item-2 width-full'>2</div>
  <div class='item item-3 width-third'>3</div>
  <div class='item item-4 width-third'>5</div>
  <div class='item item-5 width-third'>6</div>
  <div class='item item-6 width-half'>7</div>
  <div class='item item-7 width-half'>4 <br> wrap</div>
  <div class='item item-1 width-half'>5</div>
  <div class='item item-2 width-half'>6</div>
</div>

CSS

div {box-sizing:border-box;}
.cont {
  display: flex;
  flex-flow: row wrap;
  justify-content:space-between;
  border: 1px dotted black;
  width: 80%;
  margin: auto;
}

.item {margin:5px auto;padding:5px;border:1px solid black;border-radius:5px;}

.item-1 {background: red;}
.item-2 {background: green;}
.item-3 {background: yellow;}
.item-4 {background: blue;}
.item-5 {background: grey;}
.item-6 {background: orange;}
.item-7 {background: gold;}

.width-full {width:100%;}
.width-half {width:45%;}
.width-third {width:30%;}