2019-11-03有关flex（伸缩布局的使用）
- 2019 年 11 月 5 日
- 笔记
- 伸缩布局主要是解决普通布局中的浮动问题。
- 使得块级元素的排列更加便捷。
- 以下案例为微信小程序案例，若是网页开发换成div和px 即可。
<text> dispalay: flex; 默认水平排列</text> <view class="father"> <view class="son"></view> <view class="son"></view> <view class="son"></view> </view>
.father { display: flex; } .son { width: 200rpx; height: 200rpx; border: 1rpx solid #333; }
结果如下：
默认.png
- 那么怎么竖直排列呢 ? => flex-direction: column;
<text> 如何竖直排列 </text> <view class="father1"> <view class="son"> </view> <view class="son"> </view> <view class="son"> </view> </view>
.father1 { display: flex; flex-direction: column; }
竖直排列
- 那幺元素怎么上下左右居中呢？
<text> 如何竖直居中排列 </text> <view class="father2"> <view class="son"> </view> </view>
.father2 { width: 500rpx; height: 500rpx; display: flex; /* 左右居中 */ justify-content: center; /* 上下居中 */ align-items: center; /* flex-end 是往下居中 */ border: 1rpx solid red; }
结果如下：
居中.png
- 那么怎么换行呢？
<text> 如何换行 </text> <view class="father3"> <view class="son3"> 菜单 </view> <view class="son3">菜单 </view> <view class="son3">菜单 </view> <view class="son3">菜单 </view> <view class="son3">菜单 </view> <view class="son3">菜单 </view> <view class="son3">菜单 </view> <view class="son3">菜单 </view> <view class="son3">菜单 </view> <view class="son3">菜单 </view> </view>
.father3 { width: 100%; display: flex; /* 换行 配合百分比的形式 */ flex-wrap: wrap; } .son3 { width: 20%; height: 200rpx; border: 1px solid red; line-height: 200rpx; box-sizing: border-box; text-align: center; }
结果如下：
wrap.png
- 那么flex： 1是什么意思？
<text> flex: 1 具体意思</text> <view class="father5"> <view class="son5"></view> <view class="son5"></view> <view class="son5"></view> </view>
.father5 { display: flex; border: 1px solid red; } .son5 { width: 200rpx; height: 200rpx; border: 1rpx solid #333; flex: 1; /* flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长 *//* flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小 *//* flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： - 如果包装器中有3个div，则每个div将占用33％。 */ }
结果如下：
flex:1.png
