小程序布局

骑猪看日落 2023-08-17 16:54 9阅读 0赞

<viewclass="bc">

<view>

<textbc\_text>demo</text>

</view>

<viewclass="bc\_2">

<viewstyle="display:flex; flex-direction:row;">

<viewclass='flex\_item green'></view>

<viewclass='flex\_item red'></view>

<viewclass='flex\_item blue'></view>

</view>

<viewclass="bc\_2">

<viewstyle="display:flex; flex-direction:column;">

<viewclass='flex\_item green'></view>

<viewclass='flex\_item red'></view>

<viewclass='flex\_item blue'></view>

</view>

<viewclass="bc\_2">

<viewstyle="display:flex; flex-direction:row;justify-content:flex-start;">

<viewclass='flex\_item green'></view>

<viewclass='flex\_item red'></view>

<viewclass='flex\_item blue'></view>

</view>

<viewclass="bc\_2">

<viewstyle="display:flex; flex-direction:row;justify-content:flex-end;">

<viewclass='flex\_item green'></view>

<viewclass='flex\_item red'></view>

<viewclass='flex\_item blue'></view>

</view>

<viewclass="bc\_2">

<viewstyle="display:flex; flex-direction:row;justify-content:center;">

<viewclass='flex\_item green'></view>

<viewclass='flex\_item red'></view>

<viewclass='flex\_item blue'></view>

</view>

<viewclass="bc\_2">

<view>向左右靠拢，中间均匀分布</view>

<viewstyle="display:flex; flex-direction:row;justify-content:space-between;">

<viewclass='flex\_item green'></view>

<viewclass='flex\_item red'></view>

<viewclass='flex\_item blue'></view>

</view>

<viewclass="bc\_2">

<view>左右留空，中间均匀分布</view>

<viewstyle="display:flex; flex-direction:row;justify-content:space-around;">

<viewclass='flex\_item green'></view>

<viewclass='flex\_item red'></view>

<viewclass='flex\_item blue'></view>

</view>

<viewclass="bc\_2">

<viewstyle="display:flex; flex-direction:row;align-items:flex-start; height:100px;">

<viewclass='flex\_item green'></view>

<viewclass='flex\_item red'></view>

<viewclass='flex\_item blue'></view>

</view>

<viewclass="bc\_2">

<viewstyle="display:flex; flex-direction:row;align-items:flex-end; height:100px;">

<viewclass='flex\_item green'></view>

<viewclass='flex\_item red'></view>

<viewclass='flex\_item blue'></view>

</view>

<viewclass="bc\_2">

<viewstyle="display:flex; flex-direction:row;align-items:center; height:100px;">

<viewclass='flex\_item green'></view>

<viewclass='flex\_item red'></view>

<viewclass='flex\_item blue'></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;

![1138839-20171017110547912-1150417557.png][]

![1138839-20171017110648396-1948088036.png][]

![1138839-20171017110702974-717813025.png][]

转载于:https://www.cnblogs.com/zimublog/p/9506875.html

[1138839-20171017110547912-1150417557.png]: /images/20230809/8ac54da193594c369926aa4f51ad1063.png
[1138839-20171017110648396-1948088036.png]: /images/20230809/d1b393f18ad447fd9778406a594cf666.png
[1138839-20171017110702974-717813025.png]: /images/20230809/0b129b20121546149e14f28758ff3019.png