Flex Box example 2

by Karla Jaramillo

HTML

<div class="wrapper">
  <div class="box box-1">15
  </div>
  <div class="box box-2">18</div>
  <div class="box box-3">Lov</div>
</div>

CSS

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: space-between;
  font-weight: bold;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
  font-size: 55px;
}

.wrapper > * {
  padding: 50px;
  flex: 1 100%;
}

.box {
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
}
.box-1 {
  background: rgb(59, 203, 223);
   border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.box-2 {
  background: rgb(176, 244, 131);
}

.box-3 {
  background: tomato;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

@media all and (min-width: 600px) {
  .box {
    flex: 1 auto;
  }
    
}
//@media all and (max-width: 600px) {
//.wrapper {
        //-webkit-flex-flow: column wrap;
        //flex-flow: column wrap;
    //}
//}
body {
  padding: 2em;
}