弹性布局
对于弹性布局的开启我们需要加上display: flex
属性
flex-drection
flex-drection属性可以决定弹性容器的方向,效果如下
假设有如下的页面布局
<view class='flex-container'>
<view class='view-size bg-red'></view>
<view class='view-size bg-green'></view>
<view class='view-size bg-yellow'></view>
</view>
.flex-container{
background-color: lightcyan;
height: 600rpx;
width: 100%;
}
.view-size{
height: 200rpx;
width: 200rpx;
}
.bg-red{
background-color: red;
}
.bg-green{
background-color: green;
}
.bg-yellow{
background-color: yellow;
}
效果如下
假如我们加上display: flex;
,效果如下