鍍金池/ 問答/UI  HTML/ flex布局

flex布局

clipboard.png

上圖的樣式如下：

<view style='display:flex;justify-content:space-between;align-items:center;'>
    <view style='display:flex;align-items:center;'>  // 如何【不】多添加這個(gè)view元素就能實(shí)現(xiàn)上圖的樣式，即如何通過下面的元素結(jié)構(gòu)實(shí)現(xiàn)上圖的樣式（使用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>
回答
編輯回答
情皺

根據(jù)你的實(shí)際情況，外圍view需要給個(gè)width，我默認(rèn)用了100%.
還有若在不動(dòng)你的結(jié)構(gòu)上用flex實(shí)現(xiàn)左右布局，內(nèi)部的view看起來不能動(dòng)它的樣式，那么只有在左右兩部分中間插入一個(gè)空白區(qū)域，這個(gè)區(qū)域的寬度，這個(gè)區(qū)域的寬度根據(jù)你的需要設(shè)定。

    <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>
2018年3月3日 04:38
編輯回答
傲嬌范

這個(gè)可以不用flex布局，只是簡單的左右布局就好了。左邊的頭像正常流，右側(cè)的按鈕右浮動(dòng)就好了

2017年8月10日 10:50