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

2019-11-05 17:41:36 浏览数 (1)
  • 伸缩布局主要是解决普通布局中的浮动问题。
  • 使得块级元素的排列更加便捷。
  • 以下案例为微信小程序案例，若是网页开发换成div和px 即可。
代码语言：javascript复制
<text>  dispalay: flex; 默认水平排列</text>
<view class="father">
  <view class="son"></view>
  <view class="son"></view>
  <view class="son"></view>
</view>
代码语言：javascript复制
.father {
  display: flex;
}
.son {
  width: 200rpx;
  height: 200rpx;
  border: 1rpx solid #333;
}

结果如下：

默认.png

  • 那么怎么竖直排列呢 ? => flex-direction: column;
代码语言：javascript复制
<text> 如何竖直排列 </text>
<view class="father1">
  <view class="son"> </view>
  <view class="son"> </view>
  <view class="son"> </view>
</view>
代码语言：javascript复制
.father1 {
  display: flex;
  flex-direction:  column;
}

竖直排列

  • 那么元素怎么上下左右居中呢？
代码语言：javascript复制
<text> 如何竖直居中排列 </text>
<view class="father2">
  <view class="son"> </view>
</view>
代码语言：javascript复制
.father2 {
  width: 500rpx;
  height: 500rpx;
  display: flex;
  /* 左右居中 */
  justify-content: center;
  /* 上下居中 */
  align-items: center;
/* flex-end  是往下居中  */
    border: 1rpx solid red;
}

结果如下：

居中.png

  • 那么怎么换行呢？
代码语言：javascript复制
<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>
代码语言：javascript复制
.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是什么意思？
代码语言：javascript复制
<text>  flex: 1 具体意思</text>
<view class="father5">
<view class="son5"></view>
<view class="son5"></view>
<view class="son5"></view>

</view>
代码语言：javascript复制
.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

flex png 布局 开发 微信小程序

0 人点赞