小程序view排版
<view class="bc">
<view>
<text bc_text>demo</text>
</view>
<view class="bc_2">
<view>行排列</view>
<view style="display:flex; flex-direction:row;">
<view class='flex_item green'></view>
<view class='flex_item red'></view>
<view class='flex_item blue'></view>
</view>
</view>
<view class="bc_2">
<view>列排列</view>
<view style="display:flex; flex-direction:column;">
<view class='flex_item green'></view>
<view class='flex_item red'></view>
<view class='flex_item blue'></view>
</view>
</view>
<view class="bc_2">
<view>向左靠拢</view>
<view style="display:flex; flex-direction:row;justify-content:flex-start;">
<view class='flex_item green'></view>
<view class='flex_item red'></view>
<view class='flex_item blue'></view>
</view>
</view>
<view class="bc_2">
<view>向右靠拢</view>
<view style="display:flex; flex-direction:row;justify-content:flex-end;">
<view class='flex_item green'></view>
<view class='flex_item red'></view>
<view class='flex_item blue'></view>
</view>
</view>
<view class="bc_2">
<view>左右居中</view>
<view style="display:flex; flex-direction:row;justify-content:center;">
<view class='flex_item green'></view>
<view class='flex_item red'></view>
<view class='flex_item blue'></view>
</view>
</view>
<view class="bc_2">
<view>向左右靠拢,中间均匀分布</view>
<view style="display:flex; flex-direction:row;justify-content:space-between;">
<view class='flex_item green'></view>
<view class='flex_item red'></view>
<view class='flex_item blue'></view>
</view>
</view>
<view class="bc_2">
<view>左右留空,中间均匀分布</view>
<view style="display:flex; flex-direction:row;justify-content:space-around;">
<view class='flex_item green'></view>
<view class='flex_item red'></view>
<view class='flex_item blue'></view>
</view>
</view>
<view class="bc_2">
<view>向上靠拢</view>
<view style="display:flex; flex-direction:row;align-items:flex-start; height:100px;">
<view class='flex_item green'></view>
<view class='flex_item red'></view>
<view class='flex_item blue'></view>
</view>
</view>
<view class="bc_2">
<view>向下靠拢</view>
<view style="display:flex; flex-direction:row;align-items:flex-end; height:100px;">
<view class='flex_item green'></view>
<view class='flex_item red'></view>
<view class='flex_item blue'></view>
</view>
</view>
<view class="bc_2">
<view>上下居中</view>
<view style="display:flex; flex-direction:row;align-items:center; height:100px;">
<view class='flex_item green'></view>
<view class='flex_item red'></view>
<view class='flex_item blue'></view>
</view>
</view>
</view>
.bc{
"> #ffff00;
font-size: 16px;
}
.bc_2{
"> #ffffff;
margin: 10px;
}
.bc_text{
padding:40px;
}
.flex_item{
width: 60px;
height: 60px;
}
.green{
"> #00ff00;
}
.red{
"> #ff0000;
}
.blue{
"> #0000ff;
}

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步