微信小程序 flexbox layout快速实现基本布局的解决方案

<view>
<image src="/UploadFiles/2021-04-02/ 宣传图 2.jpg">

表 3.2.wxss 代码


.container1{
height: 80vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: red;
background-color: yellow
}
.container2{
background-color: yellow;
height: 20vh;
width: 70vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
color:blue
}
.view1{
height: 650rpx;
width: 550rpx
}


效果图展示：

图 3.1
对 flexbox layout 的属性总结：
弹性盒子布局具有六大属性：
（ 1 ） flex-direction 属性决定主轴的方向
row （默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column ：主轴为垂直方向，起点在上沿。
column-reverse ：主轴为垂直方向，起点在下沿
（ 2 ） flex-wrap属性决定元素的换行
nowrap （默认）：不换行。
wrap ：换行，第一行在上方
wrap-reverse：换行，第一行在下方。
（ 3 ） flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式
（ 4 ） justify-content 属性定义内容在主轴上的对齐方式。
flex-start（默认值）：左对齐。
flex-end：右对齐。
center ： 居中。
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。
（ 5 ） align-items 属性定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center ：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto ，将占满整个容器的高度。
（ 6 ） align-content 属性定义了多根轴线的对齐方式
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center ：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
结语 
flexbox layout 弹性盒子布局以上只是介绍了简单的容器属性。由上面的介绍和代码例子可以看出用它来对页面布局非常的方便和快捷，所写的代码也十分精简。掌握弹性盒子的容器属性就可以轻松的玩转小程序的页面布局，高效又简单。