flex垂直两端分布

<view class="footer">
      <view class="footer-left auto-img"></view>
      <view class="footer-right">
        <view class="right-top">取臻</view>
        <view class="right-lower">
          <text>2021-11-11 02:22:33</text>
          <text>
            <text class="iconfont iconeye iconicons64x6416"></text>
            <text>898</text>
          </text>
        </view>
      </view>
    </view>
.footer{
    width: calc(100% - 24rpx);
    background-color: #7591BC;
    margin: 12rpx;
    display: flex;
    align-items: center;
}
.footer-left{
    width: 200rpx;
    height: 150rpx;
    border: 1px solid red;
}
.footer-right{
    display: flex;
    flex: 1;
    /* flex-direction: column; */
    flex-wrap: wrap;
    align-content: space-between;
    height: 150rpx;
}
.right-top{
    width: 100%;
}
.right-lower{
    display: flex;
    justify-content: space-between;
    flex: 1;
}

版权声明:本文为weixin_46056625原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。