flex布局

Question

上图的样式如下：

<view style='display:flex;justify-content:space-between;align-items:center;'>
    <view style='display:flex;align-items:center;'>  // 如何【不】多添加这个view元素就能实现上图的样式，即如何通过下面的元素结构实现上图的样式（使用flex布局）
        <image></image>
        <image></image>
        <image></image>
        <image></image>
        <image></image>
        <image></image>
    </view>
    <view>查看更多</view>
</view>

    <view style='display:flex;align-items:center;'>
        <image></image>
        <image></image>
        <image></image>
        <image></image>
        <image></image>
        <image></image>
        <view>查看更多</view>
    </view>

Answer 1

根据你的实际情况，外围view需要给个width，我默认用了100%.
还有若在不动你的结构上用flex实现左右布局，内部的view看起来不能动它的样式，那么只有在左右两部分中间插入一个空白区域，这个区域的宽度，这个区域的宽度根据你的需要设定。

    <view style='display:flex;justify-content:space-between; align-items:center; width: 100%'>
        <image></image>
        <image></image>
        <image></image>
        <image></image>
        <image></image>
        <image></image>
        <div style='flex-basis:10%'></div>
        <view>查看更多</view>
    </view>

Answer 2

这个可以不用flex布局，只是简单的左右布局就好了。左边的头像正常流，右侧的按钮右浮动就好了