SOURCE

<div class="flex-container">  
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item flex5"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

*{padding:0;margin:0;box-sizing:border-box}
.flex-container {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content:space-evenly;
  align-items:center;
  align-content:space-evenly
}

/* 以下为辅助样式 */

.flex-container{ 
  width:400px;
  height:200px;
  margin:50px;
  border:1px solid yellow
}
.flex-container .flex-item{
  /* padding:20px 10px; */
  width:100px;
  height:42px;
  text-align:center;
  background-color: #B1FF84; 
  /* flex:0 1 100px; */
  outline:1px solid blue;
  margin:0 10px
}
.flex-container .flex-item:first-child{ 
  background-color: #F5DE25; 
  padding:10px 0;
  flex-shrink:5;
  /* order:2 */
}
.flex-container .flex-item:last-child{ 
  background-color: #90D9F7; 
  order:-1;
  /* padding:30px 10px; */
}