弹性布局
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;
}