SOURCE

<div class="flex-container">
  <div class="flex-item">
    <div class="head">
      2018.12.31
    </div>
    <div class="body">
      建立日期
    </div>
  </div>
  <div class="flex-item">
    <div class="head">
      31天
    </div>
    <div class="body">
      连续打卡
    </div>
  </div>
  <div class="flex-item">
    <div class="head">
      11天
    </div>
    <div class="body">
      最长连续打卡
    </div>
  </div>
  <div class="flex-item">
    <div class="head">
      5天
    </div>
    <div class="body">
      连续打卡
    </div>
  </div>
</div>
<div class="split">
</div>
<div class="icon">
</div>
<div class="title">
  12月打卡日志
</div> 
<div class="button">
  <div class="button1">
    删除
  </div>
  <div class="button_blank">
  </div>
  <div class="button1">
    结束
  </div>
  <div class="button_blank">
  </div>
  <div class="button1">
    编辑
  </div>
</div>

.flex-container {
  display: flex;
  border: 1px solid blue;
}

.flex-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 40px;
  margin-bottom: 40px;
  border: 1px solid red;
}

.head {
  display: flex;
  border: 1px solid blue;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
}

.body {
  display: flex;
  border: 1px solid blue;
  justify-content: center;
  font-size: 24px;
  color: #9b9b9b;
}

.split {
  height: 16px;
  background-color: #f8f8f8;
  border: 1px solid red;
}

.icon {
  height: 100px;
  width: 100px;
  margin: auto;
  margin-top: 44px;
  border-radius: 50%;
  border: 1px solid red;
}

.title {
  margin-top: 20px;
  font-size: 36px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  border: 1px solid red;
}

.button {
  display:flex;
  /* margin-top:80px; */
  border: 1px solid red;
  flex: 1;
  height:90px;
  
  margin: 80px 30px;
}

.button1 {
  flex: 1;
  /* margin:auto; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin:auto; */
  border: 1px solid blue;
}

.button_blank {
  width:30px;
  border: 1px solid darkblue;
}