Flexbox Use Case 1

flex1child.css

.add-on {
  /*ie9*/
  padding:0;
  margin:10px;
  float:left;
  box-sizing:border-box;
  /*end ie9*/
  background-color:#fff;
  width:340px;
}

/*the child items set at a fixed width of 340 naturally flow 
to 2 or 3 columns depending on screen size, but I want them to be full width at 600px */
@media screen and (max-width:600px) {
  .add-on {
    width:100%;
  }
}

flex1parent.css

.ukuu-addon-wrapper {
  /*crazy, but you have to declare all the ms (for ie) values first, or they won't work*/
  display:-ms-flexbox;
  -ms-flex-direction:row;
  -ms-flex-align:stretch;
  -ms-flex-wrap:wrap;
  width: 100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  padding:30px 0;
  justify-content: space-around;
  flex-flow:row wrap;
  /*i'm pretty sure I put in float:left; only here because of ie9. It shouldn't be necessary for flex
  items and has no meaning in flex.*/
  float:left;
}