<div class="container">
  <p>stretch（row）</p>
  <div class="box row stretch">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
  </div>
</div>
<div class="container">
  <p>flex-start（row）</p>
  <div class="box row flex-start">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
  </div>
</div>
<div class="container">
  <p>flex-end（row）</p>
  <div class="box row flex-end">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
  </div>
</div>
<div class="container">
  <p>center（row）</p>
  <div class="box row center">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
  </div>
</div>
<div class="container">
  <p>baseline（row）</p>
  <div class="box row baseline">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
    <div class="item item4">item4</div>
    <div class="item item5">item5</div>
  </div>
</div>
<div class="container">
  <p>stretch（column）</p>
  <div class="box column stretch">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
  </div>
</div>
<div class="container">
  <p>flex-start（column）</p>
  <div class="box column flex-start">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
  </div>
</div>
<div class="container">
  <p>flex-end（column）</p>
  <div class="box column flex-end">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
  </div>
</div>
<div class="container">
  <p>center（column）</p>
  <div class="box column center">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
  </div>
</div>
<div class="container">
  <p>baseline</p>
  <div class="box column baseline">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
    <div class="item item4">item4</div>
    <div class="item item5">item5</div>
  </div>
</div>

.box {
  width: 100%;
  background-color: #eee;
}
  
.row {
  height: 120px;
  
  &.stretch {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch; 
  }
  
  &.flex-start {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start; 
  }
  
   &.flex-end {
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start; 
     align-items: flex-end; 
  }
  
  &.center {
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start; 
     align-items: center; 
  }
  
  &.baseline {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start; 
    align-items: baseline; 
  }
  
  &.column {
    flex-flow: column nowrap; 
  }
}//.box

.column {
  width: 100%;
  background-color: #eee;
  
  &.stretch {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch; 
    
    .item {
      width: auto;
    }
  }
  
  &.flex-start {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start; 
  }
  
   &.flex-end {
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start; 
     align-items: flex-end; 
  }
  
  &.center {
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start; 
     align-items: center; 
  }
  
  &.baseline {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start; 
    align-items: baseline; 
  }
}//.column

.item {
  width: 96px;
  padding: 12px 0;
  background-color: #d1dde3;
  text-align: center;
  
  &.item1 {
    height: 30px;
  }
  
  &.item2 {
    height: 60px;
  }
  
  &.item3 {
    height: 45x;
  }
  
  &.item4 {
    height: 90px;
  }
  
  &.item5 {
    height: 50px;
  }
}//.item

.container {
  margin-bottom: 48px;
  
  p {
    font-size: 24px;
    font-weight: bold;
    line-height: 36px;
  }
}//.container