flex布局，align-content

flex布局，align-content

<template>
    <view class="container">
        <view class="green txt">
            A
        </view>
        <view class="red txt">
            B
        </view>
        <view class="blue txt">
            C
        </view>
        <view class="pink txt">
            D
        </view>
        <view class="orange txt">
            E
        </view>
        <view class="brown txt">
            F
        </view>
        

    </view>
</template>

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

<style>
    /* 同级目录 */
 @import url("align-content.css");
</style>

 

css

 .container{
     /* 定义flex容器 */
     display: flex;
     /* 
                 设置容器内部元素的排列方向 
                row: 定义排列方向 从左到右 
                row-reverse: 从右到左
                column: 从上到下
                column-reverse: 从下到上    
      */
     flex-direction: row;
     
     /*
          nowrap: 不换行
          wrap: 换行
          wrap-reserse: 逆向换行
      */
     flex-wrap:wrap;
     
     /*
          当轴线超过1条的时候， flex容器可以把 多条轴线视为元素对待， 可以进行对齐
          center: 居中
          flex-start: 向左（向上）对齐
          flex-end: 向右 （向下）对齐
          stretch: 当宽度width 没有设置的时候， 轴线可以被拉伸
          space-between: 两端对齐， 元素之间的 空白等比切分
          space-around: 轴线两边的 空白等比切分
      */
     align-content: space-around;
     
     height: 600upx;
     background-color: #8F8F94;
    }
      
    .txt{
        font-size: 20px;
        width: 150upx;
        height: 150upx;
    }
      
    .red{
        background-color: red;
    }
    
    .green{
        background-color: green;
    }
    
    .blue{
        background-color: blue;
    }
    
    .brown{
        background-color: brown;
    }

    .orange{
        background-color: orange;
    }
    
    .pink{
        background-color: pink;
    }