flex布局

.container{
   height:100%;
   width:100%;
   background:blue;
   display:flex;
   /*决定元素的排列方向
      display-direction:row  横向（默认）主轴是横向的
                       column纵向排列   主轴变为竖向
   */
   /*
    是否换行
    flex-wrap: wrap;放不下时自动换行
              nowrap不换行缩小各个比例（默认）
            wrap-reserve翻转（在交叉轴翻转，也就是在最上面会到最下面，不是左右是上下）
   */
   /*
    flex-flow是上面方向和换行的简写
    flex-flow:row wrap;
   */
   /*
    justify-content: center;在主轴上居中
                 flex-start从左边开始对齐（默认）
                 flex-end从右边对齐
                 space-around每一块占据的区域大小一样大
                 space-between两端对齐
   */
   /*
    align-items: center;在交叉轴上的居中
                flex-start。flex-end
                stretch当子元素没有设置高度，会自动占满交叉轴上的位置
                baseline对齐方式是一各个区域块内的文字来对齐
   */

    /*
    align-content: center;在主轴上居中
                 flex-start从左边开始对齐（默认）
                 flex-end从右边对齐
                 space-around每一块占据的区域大小一样大
                 space-between两端对齐
                 stretch
   */
}
.items{
  width:100rpx;
  height:100rpx;
  background:blanchedalmond;
  border:1px solid #000;

  /*
    flex各个属性写给子元素
      flex-grow:0(默认)
                1，2，3每一块占据的份数

      flex-shrink:1（默认）空间不足等比缩小
                  0无效果
      
      flex-basis:在微信上要写  **px；在主轴占据的空间

      flex:1 0 200px;是以上三个的简写

      order:1  给每一个写  可以改变位置1代表第一个

      align-self:flex-end;子元素自己定义自身的排列方式，不影响其他元素
                center;在交叉轴上的居中
                flex-start。flex-end
                stretch当子元素没有设置高度，会自动占满交叉轴上的位置
                baseline对齐方式是一各个区域块内的文字来对齐
  */
}

之前写小程序用到的弹性盒布局，在这里分享一下。