- 伸缩布局主要是解决普通布局中的浮动问题。
- 使得块级元素的排列更加便捷。
- 以下案例为微信小程序案例,若是网页开发换成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
网友评论