⼩程序的居中布局，你可以这样做
前段时间上线后就弃坑了，回到⽹页开发去了，最近⼜有新项⽬，再次⼊坑，难免需要⼀些demo来重新熟悉，在这个过程中，发现demo中很少有⼈使⽤flex布局，今天给⼤伙稍微讲⼀下这个布局。
flex布局有啥⽤呢，最⼤的作⽤便是快速实现你所需要的布局（⽔平居中、垂直居中、左右对齐等）
flex布局的使⽤⾮常简单，在这我将⼏个常⽤的场景，其他更深⼊的可以去查资料了解（我才不会说是因为我懒）
⾸先是对布局容器设置display:flex;
然后你就可以尽情利⽤两个属性（justify-content（⽔平⽅向）和align-items（垂直⽅向））进⾏放纵了
例如众所周知最蛋疼的垂直居中
/* wxml */
<view class="classname">
<text>测试⽤⼩玩意⼉</text>
</view>
/* wxss */
view{
flex布局对齐方式
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
将align-items改成justify-content
/* wxml */
<view class="classname">
<text>测试⽤⼩玩意⼉</text>
</view>
/* wxss */
view{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
两个属性⼀起来
常⽤场景不⽌居中布局，还有很多，但⼀讲起来篇幅难免太长，这⾥⽤⽂字带过，不懂可以留⾔问我，或者度娘/Google（推荐看阮⼀峰的教程）
flex-direction（改变轴线⽅向）: row（⽔平轴线，默认） column（垂直轴线） //这⾥讲的是⽐较常⽤的布局
（轴线举例：⽗级元素使⽤flex布局，默认布局下块级元素是会换⾏的，但设置了flex布局后默认就都⽔平排列了）
justify-content: flex-start（居于轴线的开头） center（居于轴线的中间） flex-end（居于轴线的末端） space-around（将⼦元素按⽐例排列在轴线上） space-between（将⼦元素排列在轴线两端）
align-items: 同justify-content
flex-wrap（规定⼦元素溢出处理）: nowrap（不换⾏） wrap（顺序换⾏） wrap-reverse（逆序换⾏）
flex-direction（改变轴线⽅向）: row（⽔平轴线，默认） column（垂直轴线） //这⾥讲的是⽐较常⽤的布局
（轴线举例：⽗级元素使⽤flex布局，默认布局下块级元素是会换⾏的，但设置了flex布局后默认就都⽔平排列了）
justify-content: flex-start（居于轴线的开头） center（居于轴线的中间） flex-end（居于轴线的末端） space-around（将⼦元素按⽐例排列在轴线上） space-between（将⼦元素排列在轴线两端）
align-items: 同justify-content
flex-wrap（规定⼦元素溢出处理）: nowrap（不换⾏） wrap（顺序换⾏） wrap-reverse（逆序换⾏）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。