<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>space-between（row）</p>
  <div class="box row space-between">
    <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>space-around（row）</p>
  <div class="box row space-around">
    <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>space-between（column）</p>
  <div class="box column space-between">
    <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>space-around（column）</p>
  <div class="box column space-around">
    <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>

.box {
  background-color: #eee;
}
  
.row {
  width: 100%;
  min-width: 680px;
  
  &.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-end;
     align-items: flex-start; 
  }
  
  &.center {
     display: flex;
     flex-flow: row nowrap;
     justify-content: center;
     align-items: flex-start; 
  }
  
  &.space-between {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start; 
  }
  
  &.space-around {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: flex-start; 
  }
}//.row

.column {
  width: 96px;
  height: 500px;
  
  &.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-end;
     align-items: flex-start; 
  }
  
  &.center {
     display: flex;
     flex-flow: column nowrap;
     justify-content: center;
     align-items: flex-start; 
  }
  
  &.space-between {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start; 
  }
  
  &.space-around {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: flex-start; 
  }
}//.column

.item {
  width: 96px;
  padding: 12px 0;
  background-color: #d1dde3;
  text-align: center;
}//.item

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