flex test

css3 flex

by weiming le

HTML

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

SCSS

.items {
  display: flex;
  height: 140px;
  /* flex-direction: row;
  flex-wrap: wrap; */
  flex-flow: row wrap;//flex-direction and flex-wrap
  justify-content: space-around ;
  background: #eee;
  border: 1px solid green;
  padding: 30px 0px;
  .item {
    border: 1px solid orange;
    text-align: center;
    font-size: 22px;
    color: #333;
    width: 200px;
    height: 40px;
   }
}