收藏
回答

小程序内flex布局问题

如何让 1和2 与b 顶端对齐???



最后一次编辑于  2018-09-15
回答关注问题邀请回答
收藏

2 个回答

  • 卢霄霄
    卢霄霄
    2018-09-17

    你都写成是纵向布局了。。flex用的不多,你至少可以想办法拆分啊

    比如,把 a 和 b 做成一组, 把 1 和 2 做成一组,先横向布局,再分别纵向布局

    <view>

        <view>

            <view>a</view>

            <view>b</view>

        </view>  

        <view>

            <view>1</view>

            <view>2</view>

        </view>

    </view>

    或者类似的, a 和 1 做成一组,b 和2 做成一组,先纵向布局,再分别横向布局

    2018-09-17
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2018-09-17

      另外你可以用 flex:wrap来做。。不想写给你

      2018-09-17
      回复
  • 惊蛰
    惊蛰
    2018-09-15

    /* 首页图片 */

    .home_list_i{

    margin-top:10rpx;

    width: 100%;

    height: 300rpx;

    background:rgba(0, 146, 127, 0.2);

    display: flex;

    flex-direction: column;

    justify-content:conter;

    align-items: flex-start;

    }

    .home_list_img_title{

    width: 100%;

    height: 30%;

    background:rgba(121, 79, 79, 0.3);

    }

    .home_list_img_conter{

    width: 70%;

    flex:1 0 70%;

    background:rgba(14, 255, 6, 0.3);

    }

    .home_list_img_photo{

    width: 30%;


    flex:1 0 70%;

    align-self: flex-end;

    background:rgba(250, 246, 3, 0.3);

    }


    /*wxml */


    <view class='home_list_i'>

    <view class='home_list_img_title'>a</view>

    <view class='home_list_img_conter'>b</view>

    <view class='home_list_img_photo  flex-sslf'>1</view>

    <view class='home_list_img_photo  flex-sslf'>2</view>

    </view>




    2018-09-15
    赞同
    回复