微信小程序之布局框架之弹性布局

弹性布局

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
容器默认存在两根轴：水平的主轴和垂直的交叉轴（侧轴）

主轴默认自左向右，侧轴默认自上而下。

版权声明：本文为CSDN博主「Pursuit53」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Pursuit53/article/details/104764470

属性：

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;
}

效果