横向排布row///布局flex

<template>
    <view>
        <view  class="contanis">
             <view  class="green">
                 <text>A</text>
             </view>
             <view  class="red">
                  <text>B</text>             
             </view>
             <view  class="wirte">
                      <text>C</text>         
             </view>
             <view  class="blue">
                      <text>D</text>         
             </view>
             <view  class="black">
                      <text>E</text>         
             </view>
             <view  class="gray">
                      <text>F</text>         
             </view>
             <view  class="orange">
                      <text>G</text>         
             </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style lang="scss" scoped>
   
   .contanis{
      // 定义flex容器
       display: flex;
    设置元素的排列方向
    // row  从左到右
    //row-server  从右到左
    //column  从上到下
    //column-server  从下到上
    // flex-direction: column;
    
    //是容器里的元素换行
    //wrap  换行
    //nowrap  不换行
    flex-wrap: wrap;
    
    //justify-content: ;设置元素在主轴上的对齐方式
    //flex-start  (默认)左对齐
    //flex-end  右对齐
    //center  居中对齐
    //space-around 元素两边平均等分空白间隙部分，最左或最右和元素之间的距离是1:2
    //space-between  两端对齐 ，元素之间平均等分空白间隙部分。
    //space-evenly  
    justify-content:  center;
    //align-items 设置容器中元素在交叉轴上的对齐方式
    //stretch  (默认) 当元素的高度没有设置，则元素的高度会拉伸至元素的高度一致
    //flex-start  在交叉轴上向起点位置(向上/向右)对齐，
    //flex-end 在交叉轴上向结束位置(向上/向右)对齐
    //center  居中对齐
    //baseline  保证元素的文字在同一文字上
    align-items: center;
    
    //当轴线超过一条时，flex容器可以把多条轴线视为元素对待，可以进行对齐。
    // center ：居中
    //flex-start  向左对齐
    //flex-end   向右对齐
    //stretch  当width没有设置时，轴线被拉伸
    //space-between: 两端对齐，元素之间的空白被等比切分
    // space-around: 轴线两边的空白被对比切分
    align-content: stretch;
    
    // order  用于设置flex容器内部的容器的每个元素的排列方式，
    // 默认是0,排序规则,由小变大
    //flex-grow  用于设置元素的放大比例，默认为0
                 // 如果为0,不放大
   //flex-shrink  用于定义属性的缩放比例，默认为1
     //设置0 的时候，不进行缩放
   //flex-basis   用于设置元素固定或自动空间的占比 （如：flex-basis:100upx）
  
  
   //align-self： 重写容器中元素在交叉轴上的对齐方式
    //stretch  (默认) 当元素的高度没有设置，则元素的高度会拉伸至元素的高度一致
    //flex-start  在交叉轴上向起点位置(向上/向右)对齐，
    //flex-end 在交叉轴上向结束位置(向上/向右)对齐
    //center  居中对齐
    //baseline  保证元素的文字在同一文字上
   
     
     height: 900upx;
     background-color: #007AFF;
     text-align: center; 
     
      .green{
           width: 70px;
           height: 70px;
          background-color: green;
         //margin: 10px;
           line-height:70px ;
           color: #FFFFFF;
           // order:2;
           // flex-grow: 1;
           flex-shrink: 1;
           flex-basis: 200px;
           
      }
     .red{
                width: 70px;
                height: 70px;
               background-color: red;
              //margin: 10px;
                line-height:70px ;
                color: #FFFFFF;
                // order:1;
                 // flex-grow: 0;
                  flex-shrink: 0;
                  align-self:flex-start;
     }
     .wirte{
                width: 70px;
                height: 70px;
               background-color: #FFFFFF;
              //margin: 10px;
                line-height:70px ;
                color: #000;
               // order:4;
               // flex-grow: 3;
                          flex-shrink: 1;
     }
     .blue{
                width: 70px;
                height: 70px;
               background-color: #4CD964;
              //margin: 10px;
                line-height:70px ;
                color: #FFFFFF;
               // order: 5;
                flex-shrink: 2;
     }
     .black{
                width: 70px;
                height: 70px;
               background-color: black;
              //margin: 10px;
                line-height:70px ;
                color: #FFFFFF;
                flex-shrink: 0;
                  align-self:flex-end;
     }
     .gray{
                width: 70px;
                height: 70px;
               background-color: gray;
              //margin: 10px;
                line-height:70px ;
                color: #FFFFFF;
     }
     .orange{
                width: 70px;
                height: 70px;
               background-color: #FF6600;
              //margin: 10px;
                line-height:70px ;
                color: #FFFFFF;
               align-self:center;
               flex-shrink: 0;
     }
      
    
   }
   
 
</style>