flex布局，flex-item

<template>
    <view class="container">
        <view class="green txt">
            A
        </view>
        <view class="red txt">
            B
        </view>
        <view class="blue txt">
            C
        </view>
        <!-- 縮放用的 -->
<!--         <view class="green txt">
            D
        </view>
        <view class="red txt">
            E
        </view>
        <view class="blue txt">
            F
        </view> -->
    </view>
</template>

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

<style>
    /* 同級目錄 */
 @import url("flex-items.css");
</style>

 

css

 .container{
     /* 定義flex容器 */
     display: flex;
     /* 
                 設置容器內部元素的排列方向 
                row: 定義排列方向 從左到右 
                row-reverse: 從右到左
                column: 從上到下
                column-reverse: 從下到上    
      */
     flex-direction: row;
     
    }
      
    .txt{
        font-size: 20px;
        width: 150upx;
        height: 150upx;
    }
    
    /*
        order: 用於吧設置flex容器內部的 每個元素的 排列順序， 默認是0
               排序規則， 有小到大
        flex-grow: 用於設置元素的放大比例， 默認為0
                   如果為0， 則不放大
        flex-shrink: 用於定義屬性的 縮放比例， 默認為1
                     設置為 0 的時候， 不進行縮放
                     負數沒效果
        flex-basis: 設置長度或者占比         
    */       
    .red{
        background-color: red;
        /* order: 3; */
        /* flex-grow: 1; */
        flex-shrink: 0;
        flex-basis: 100upx;
    }
    
    .green{
        background-color: green;
        /* order: 2; */
        /* flex-grow: 1; */
        flex-shrink: 0;
    }
    
    .blue{
        background-color: blue;
        /* order: 1 */
        /* flex-grow: 1; */
        flex-shrink: 0;
    }