⼩程序布局技巧（⼀）
⼩程序布局技巧（⼀）
前⾔
友情提⽰，阅读本⽂之前，可能需要有⼀点⼩程序开发基础。本⽂旨在为那些刚⼊坑⼩程序（⽂中后⾯统称⼩程序）或者⼊坑后对页⾯UI布局有困难的开发者，⽼鸟和⼤神请⽆视。如果你还没有任何⼩程序的基础，建议移步官⽅教程：
⼩程序布局⽅式
⼩程序是通过wxss（样式）和wxml（组件）组合，⼀起来实现UI排列和复杂布局，分为Block和flex两种布局⽅式。
Block布局⽅式
我们先来看⼀段代码：
大连好玩的地方// 未添加任何样式
<view>
<view>test1</view>
<view>test2</view>
</view>
最终呈现效果为：
可以看到未添加任何样式，默认为竖直排列的。熟悉移动开发的朋友可能要问了，那么我想要实现横向排列、垂直居中、⽔平居中、靠右，靠左等效果应该怎么做了？不要急，该来的可能会迟到，终归是不会缺席的。
flex布局⽅式
火灾逃生方法⼤家都知道⼩程序样式控制是通过wxss⽂件来控制，实现复杂布局⼀般我们都是通过flex布局⽅式来实现，要使⽤ flex 布局的话需要显式的声明：display:flex; 接下来我们就给上⾯的布局加上样式，使test1和test2两个view能横向排列。
wxss添加样式
// 横向布局
.page {
display: flex;
flex-direction: row;
}
wxml应⽤样式
<view class='page'>
<view>test1</view>
<view>test2</view>
</view>
效果
从效果图可以看到，已经达到了我们需要横向布局的效果了。
flex布局种类
2022年夏至⾸先我们不管是横向布局和竖向布局，要设置属性 flex-direction ，它有4个可选值：row：从左到右的⽔平⽅向为主轴
row-reverse：从右到左的⽔平⽅向为主轴
column：从上到下的垂直⽅向为主轴
column-reverse：从下到上的垂直⽅向为主轴
为了能更好的看到效果，我们改动下代码，给每个view增加⾊块区分，然后分别展⽰每个值得不同排列效果：
row：
row-reverse：
查英语四级成绩column：
column-reverse：（parent view⾼度固定为750rpx效果）
相信不⽤我来解释，⼤家也能猜到这四个值分别能实现什么样的效果了吧。关于横向和纵向的布局我就不赘述了，各位看官可⾃⾏撸码体会。
除了上⾯提到的控制横向和纵向布局的属性了，常⽤的还有justify-content、align-items、flex-wrap等属性来辅助我们实现复杂的布局。justify-content属性
这个属性指的是主轴⽅向上的⼦元素的布局⽅式，它有5个可选值：
flex-start：主轴起点对齐(默认值)
flex-end：主轴结束点对齐
center：在主轴中居中对齐
溺水急救方法space-between：两端对齐，除了两端的⼦元素分别靠向两端的容器之外，其他⼦元素之间的间隔都相等space-around：每个⼦元素之间的距离相等，两端的⼦元素距离容器的距离也和其它⼦元素之间的距离相同这⾥的主轴指的是⽗元素中的flex-direction属性指定的元素
还是分别来展⽰下效果（默认以横向排列为主轴）：
flex-start效果同前⾯横向排列相同，这⾥不做展⽰了
flex-end：
center:
space-between:
梁静茹 勇气space-around:
align-items属性
这个属性指的是侧轴⽅向上的⼦元素的布局⽅式，它有5个可选值：
stretch 填充整个容器，当元素未设置侧轴⽅向的长度时，充满⽗元素，如设置了侧轴⽅向长度，则以⼦元素设置的长度为准(默认值) flex-start 侧轴的起点对齐 （这⾥我们⼿动设置下⼦ view 的⾼度，来看的明显⼀些）
flex-end 侧轴的终点对齐
center 在侧轴中居中对齐
baseline 以⼦元素的第⼀⾏⽂字对齐
这⾥的侧轴指的是⽗元素中的flex-direction属性指定的元素⽅向的垂直的⽅向
接下来分别来展⽰下效果（默认以纵向排列为主轴，⽤横向⽅向演⽰侧轴排列效果，横向宽度固定为750rpx，⽅便演⽰）：
stretch :（test1元素侧轴⽅向长度未设置，也就是未设置宽度，test2元素侧轴⽅向的长度(宽度)设置100rpx）
flex-start：
flex-end：
center ：
baseline：（以⼦元素的第⼀⾏⽂字对齐，由于⽂字显⽰必须横向排列，⽆法纵向排列，所以这⾥只能以横向排列为主轴显⽰效果）
修改下样式：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论