flex 布局的问题 两段文字，一条贴上居中，一条贴下居中

Question

在写微信小程页面时要做到一个效果而且一定要用flex 布局做， 要让starttime贴着上边，endtime贴着下边
，目前用了一个傻办法就是在中间在家了一个有高度的组件把上下撑开， 但应该会出问题， 想求高手告知如何做到，而不是用死办法，

<view class="flex-time">
  <view class="flex-starttime">start</view>
  <view class="flex-block"></view>
  <view class="flex-endtime">end</view>
</view>

  .flex-menu .flex-row {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items:stretch;
  font-weight: normal;
  font-size: 30rpx;
}
.flex-column{
  margin: 0;
  padding: 10rpx;
  display: flex;
  flex-direction: row;
  align-items:stretch;
  font-weight: normal;
  font-size: 30rpx;
}
.flex-time {
  margin: 0;
  padding:0 10rpx 0 10rpx;
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  border-right:2px #0054a6 solid;
  font-size: 28rpx;
  color: #b2b2b2;
  width: 150rpx;
}
.flex-starttime {
  margin-top: 0;
  padding-top: 0;
  display: inline-flex;
  align-content: flex-center;
}
.flex-endtime {
  margin-bottom: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-content: flex-center;
}
.flex-block {
  height:100rpx;
}

Answer 1

使用justify-content: space-between;即可

.flex-time {
                  margin: 0;
                  padding:0 10rpx 0 10rpx;
                  display: flex;
                  flex-direction: column;
                  align-content: flex-end;
                  border-right:2px #0054a6 solid;
                  font-size: 28rpx;
                  color: #b2b2b2;
                  width: 150rpx;
                  justify-content: space-between;
                }
                .flex-item {
                    display:flex;
                }
                .flex-cnt {
                    flex: 1;
                }

<view class="flex-item">
    <view class="flex-time">
          <view class="flex-starttime">start</view>
          <view class="flex-endtime">end</view>
        </view>
    <view class="flex-cnt">
        <view>占位</view>
        <view>占位</view>
        <view>占位</view>
        <view>占位</view>
        <view>占位</view>
        <view>占位</view>
        <view>占位</view>
    </view>
</view>

Answer 2

html

<div class="flex-time">
<div class="flex-starttime">start</div>
<div class="flex-endtime">end</div>
</div>

css

.flex-time {
display: flex;
flex-direction: column;
border:1px solid #333;
height:80px;
justify-content:space-between ;
}

Answer 3

http://runjs.cn/code/tlkeafqq

*{
            margin: 0;
            padding: 0;
        }
        body{ 
            height: 100vh; 
        }
        /*html,body{
            height: 100%;
        }*/
        body{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .header{
            height:88px;
            background: salmon;
        }
        .footer{
            height:88px;
            background: saddlebrown;
        }
        .flexnum{
            flex: 1;
        }
        .content{
            overflow: auto;
        }

    <header class="header" >头</header>
    <section class="flexnum content">内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></section>
    <footer class="footer" >脚</footer>