⼩程序之横向布局与纵向布局⼀、效果图：
⼆、代码：
wxml：
<!-- 横向布局 -->
<view class="row">
<view class="box1">box1</view>
<view class="box2">box2</view>
</view>
<!-- 纵向布局 -->
<view class="column">
<view class="box1">box1</view>
<view class="box2">box2</view>
</view>
wxss：
/* 横向布局 */
.row{
width: 100%;
height: 400rpx;
background-color: cyan;
display: flex;
/*row 横向  column 列表  */
flex-direction: row;
/* 左右居中 */
justify-content: center;
/* 上下居中 */
align-items: center;
}
/
* 纵向布局 */
.column{
margin-top: 200rpx;
width: 100%;
height: 400rpx;
background-color: cyan;
display: flex;
/*row 横向  column 列表  */
flex-direction: column;
/* 上下居中 */
justify-content: center;
写文章的小程序/
* 左右居中 */
align-items: center;
}
.box1{
width: 100rpx;
height: 100rpx;
background-color: red;
}
.box2{
width: 100rpx;
height: 100rpx;
background-color: rgb(0, 174, 255); }

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