⼩程序之布局框架之弹性布局
弹性布局
Flex是Flexible Box的缩写，意为"弹性布局"，⽤来为盒状模型提供最⼤的灵活性。任何⼀个容器都可以指定为Flex布局。
容器默认存在两根轴：⽔平的主轴和垂直的交叉轴（侧轴）
主轴默认⾃左向右，侧轴默认⾃上⽽下。
属性：
display: 通常我们要⽤到这个布局就需要在wxss中为display设置flex
flex-direction: row/column row为横向摆放，column为纵向摆放。
justify-content: space-between/space-around/center。。。。
align-items: 在伸缩容器中的布局情况，定义在伸缩容器中 flex-start；
flex-end；center；stretch；（个⼈理解就是⽐如现在flex-direction为row，align-items就是为其设置column的排列⽅式，反之就⼀样）
例⼦：
wxml
<view class="flex-conatainer">
<view class="flex-size ">
<button  class="bt">购物</button>
</view>
<view class="flex-size ">
<button class="bt">收藏</button>
</view>
<view class="flex-size">
<button  class="bt">我的</button></view>
</view>
wxss
.
flex-conatainer{
display: flex;
flex-direction: row;
justify-content: space-around; align-items: flex-end;
background-color: aqua;
height: 800rpx;
width:100%;
}
.flex-size{
height: 200rpx;
width: 200rpx;
}
.flex-size button{
margin: 60px;
}
.bt{
text-align: center;
background-color: cornflowerblue;  scroll-padding-left: 10rpx;
margin-left: 50px;
text-align: center;
flex布局详细讲解
}
效果

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