flex垂直两端分布

最新推荐文章于 2024-06-12 09:52:12 发布

贝壳贝

最新推荐文章于 2024-06-12 09:52:12 发布

阅读量929

点赞数

文章标签： html css3 flex

本文链接：https://blog.csdn.net/weixin_46056625/article/details/114090502

版权

<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;
}