美文网首页
2019-11-03有关flex(伸缩布局的使用)

2019-11-03有关flex(伸缩布局的使用)

作者: 冬天的_太阳 | 来源:发表于2019-11-03 11:05 被阅读0次
    • 伸缩布局主要是解决普通布局中的浮动问题。
    • 使得块级元素的排列更加便捷。
    • 以下案例为微信小程序案例,若是网页开发换成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

    相关文章

      网友评论

          本文标题:2019-11-03有关flex(伸缩布局的使用)

          本文链接:https://www.haomeiwen.com/subject/ltukbctx.html