zoukankan      html  css  js  c++  java
  • 微信小程序-flex布局中align-items和align-self区别

    首先看看菜鸟教程中关于align-items和align-self的定义

    align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。(对齐弹性的各项元素)

    align-self:align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。(对齐弹性对象元素内的某个

    从定义上可以看出是对齐”目标“上存在差异,这样看上去似乎不太便于理解

    /*index.wxml*/
    <view class="container">
    
      <view class="item" style='order:/4'>
          1
      </view>
    
    
      <view class="item">
          2
      </view>
      
      <view class="item  i3">
          3
      </view>
     
      <view class="item">
           4
      </view>
    
      
    
    
    </view>
    /*index.wxss*/
    .container{
      height: 100px;
      width: 100%;
      background-color: green;
      display: flex;
      /* flex-direction: column; */
      flex-direction: row;
      flex-flow: wrap;
    
      justify-content:space-between;  
      align-items: flex-start;
    }
    .item{
      width: 100rpx;
      height: 100rpx;
      background-color: yellow;
      border: 1px solid white;
    
    
    order: 3;
    }
    .i3{
      display: flex;
      align-items: flex-end;
      /* flex-grow: 1; */
      order: 1;
    }

    这里用align-items显示的结果如图,可以看到此时文字是在下方,而色块并没到下方

    如果将代码align-items换为align-self,整个块都以从下往上的方式排列了,而数字的位置仍然是在左上角

  • 相关阅读:
    计算中文混合字符串长度(一)
    PHP截取含中文的混合字符串长度的函数
    获取星座的JS函数
    获取生日对应星座的PHP函数
    简单的 jQuery 浮动层随窗口滚动滑动插件实例
    MD5算法实现
    70. Climbing Stairs QuestionEditorial Solution
    167. Two Sum II
    167. Two Sum II
    303. Range Sum Query
  • 原文地址:https://www.cnblogs.com/wcxcc/p/10309773.html
Copyright © 2011-2022 走看看