2019-11-03有关flex（伸缩布局的使用）

用户4344670

发布于 2019-11-05 17:41:36

3890

发布于 2019-11-05 17:41:36

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

结果如下：