小程序view排版
Posted wskxy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序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;
}
以上是关于小程序view排版的主要内容，如果未能解决你的问题，请参考以下文章