小程序view排版

最新推荐文章于 2023-07-20 22:01:01 发布

转载最新推荐文章于 2023-07-20 22:01:01 发布 · 6k 阅读

标签

#小程序 #小程序布局 #小程序界面 #小程序排版 #小程序view排版

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

小程序

4 篇文章

订阅专栏

本文详细介绍了使用Flexbox进行网页布局的方法，包括行排列、列排列、水平对齐方式（如向左靠拢、向右靠拢、左右居中等）及垂直对齐方式（如向上靠拢、向下靠拢、上下居中等）。通过这些技巧可以实现元素在容器中的精确布局。

<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;
}
 
 
 