uniAPP flex 布局

第三次学flex 布局，学吧 学无止境 ，没脾气。

 

设置主轴 这个我洗了很多遍了：

<template>
    <view>
        <view class="container">
            <!--这是一个flex 弹性盒子-->
            
            <view class="red text">
                红
            </view>
            <view class="green text">
                绿
            </view> 
            <view class="blue text">
                蓝
            </view>
            
        </view>
        
    </view>
</template>

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

<style>
    .container{
        
        display: flex;/*定义flex容器*/
        /*
        *row设置主轴为 横向（l->r）
        *row-reverse设置主轴为横向 但是是 (r->l)
        *columns: 设置主轴为 竖向（上->下）
        *column-reverse: 设置主轴为横向 但是是 (下->上)
        */
        flex-direction: row;
       
        
    }
    
    .red{
     background-color: #FF0000;   
    }
    .green{
        background-color: #4CD964;
    }
    .blue{
        background-color: #007AFF;
    }
    .text{
        width: 150upx;
        height: 150upx;
        font-size: 20px;
    }
</style>

注释也说的非常清楚了 详细代码看即可。

 

属性1： flex-wrap ：是否换行

<template>
    <view>
        <view class="container">
            <!--这是一个flex 弹性盒子-->
            
            <view class="red text">
                红
            </view>
            <view class="green text">
                绿
            </view> 
            <view class="blue text">
                蓝
            </view>
            <view class="yellow text">
                黄
            </view>
            <view class="violet text">
                紫
            </view>
            <view class="black text">
                黑
            </view>
            <view class="pink text">
                粉
            </view>
            
        </view>
        
    </view>
</template>

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

<style>
    .container{
        
        display: flex;/*定义flex容器*/
        flex-direction: row;
        
        /*flex-wrap:是否换行
         * nowrap： 不换行 一直挤
         * wrap ： 换行 会根据实际大小算 超出换行
         * wrap-reverse: 换行 但是反着换行
        */
       flex-wrap: wrap-reverse;
       
        
    }
    
    .red{
        background-color: #FF0000;   
    }
    .green{
        background-color: #4CD964;
    }
    .blue{
        background-color: #007AFF;
    }
    .yellow{
        background-color: #ffff00;
    }
    
    .violet{
        background-color: #aa00ff;
    }
    .black{
        background-color: #000000;
    }
    .pink{
        background-color: #ff55ff;
    }
    .text{
        width: 150upx; 
        height: 150upx;
        font-size: 20px;
        color: #FFFFFF;
    }
</style>

 

属性2： justify-content 设置元素在主轴上的对齐方式 

<template>
    <view>
        <view class="container">
            <!--这是一个flex 弹性盒子-->
            
            <view class="red text">
                红
            </view>
            <view class="green text">
                绿
            </view> 
            <view class="blue text">
                蓝
            </view>
            <view class="yellow text">
                黄
            </view>
           <!-- <view class="violet text">
                紫
            </view>
            <view class="black text">
                黑
            </view>
            <view class="pink text">
                粉
            </view> -->
            
        </view>
        
    </view>
</template>

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

<style>
    .container{
        
        display: flex;/*定义flex容器*/
        flex-direction: row;
        /**
         *  justify-content 设置元素在主轴上的对齐方式        
         *  flex-start：左对齐（默认）
         *  flex-end: 右对齐
         *  center: 居中对齐
         *  space-between: 先两端占满 在中间评分
         *  space-around: 元素两边平均等分剩余的空白间隙，最左、最右块的间隙是 其他间隙的1：2
         */
         justify-content: space-around;

    }
    
    .red{
        background-color: #FF0000;   
    }
    .green{
        background-color: #4CD964;
    }
    .blue{
        background-color: #007AFF;
    }
    .yellow{
        background-color: #ffff00;
    }
    
    .violet{
        background-color: #aa00ff;
    }
    .black{
        background-color: #000000;
    }
    .pink{
        background-color: #ff55ff;
    }
    .text{
        width: 150upx; 
        height: 150upx;
        font-size: 20px;
        color: #FFFFFF;
    }
</style>

 

属性3：  align-items  设置交叉轴的对齐位置(交叉轴就是侧轴)

吃亏：justify-items 和 align-items 是不一样的 。，，，   justify-items   在flex 布局中是没效果的，然后 其他布局有，而 flex 布局用的是align-items 我要讲的也是：align-items

<template>
    <view>
        <view class="container">
            <!--这是一个flex 弹性盒子-->
            
            <!-- 下面将会设置行内样式   测试 stretch 可以注释掉行内样式的高度即可-->
            <view class="red text" style="height: 100upx">
                红
            </view>
            <view class="green text"  style="height: 200upx">
                绿
            </view> 
            <view class="blue text"  style="height: 300upx">
                蓝
            </view>
            <view class="yellow text"  style="height: 400upx">
                黄
            </view>
 <!--          <view class="violet text">
                紫
            </view>
            <view class="black text">
                黑
            </view>
            <view class="pink text">
                粉
            </view> -->
            
        </view>
        
    </view>
</template>

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

<style>
    .container{
        width: 750upx;
        height: 750upx;
        background-color: #000000;
        display: flex;/*定义flex容器*/
        flex-direction: row; /*当前主轴是左到右*/
        /**
         * align-items : 设置元素在交叉轴上的对齐方式
         * stretch:  默认的，如果元素没高度 那么就跟随父元素的高度了 [拉伸]
         * flex-start: 跟着侧轴顺走
         * flex-end:   跟着侧轴逆走
         * centent:  居中
         */
 
        align-items:center;
        
    }
    
    .red{
        background-color: #FF0000;   
    }
    .green{
        background-color: #4CD964;
    }
    .blue{
        background-color: #007AFF;
    }
    .yellow{
        background-color: #ffff00;
    }
    
    .violet{
        background-color: #aa00ff;
    }
    .black{
        background-color: #000000;
    }
    .pink{
        background-color: #ff55ff;
    }
    .text{
        width: 150upx; 
        font-size: 20px;
        color: #FFFFFF;
    }
</style>

 

属性4:align-content 将 元素整体 在交叉轴上的对齐操作（如果交叉轴有空间的话）

吃亏：多行才能有效果 即 你要设置换行 warp 才可以。

<template>
    <view>
        <view class="container">
            <!--这是一个flex 弹性盒子-->
            
            <!-- 下面将会设置行内样式   测试 stretch 可以注释掉行内样式的宽度即可-->
            <view class="red text" style="width:100upx">
                红
            </view>
            <view class="green text"  style="width: 200upx">
                绿
            </view> 
            <view class="blue text"  style="width: 300upx">
                蓝
            </view>
            <view class="yellow text"  style="width: 400upx">
                黄
            </view>
       <!--   <view class="violet text">
                紫
            </view>
            <view class="black text">
                黑
            </view>
            <view class="pink text">
                粉
            </view> -->
            
        </view>
        
    </view>
</template>

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

<style>
    .container{
        width: 750upx;
        height: 250upx;
        background-color: #000000;
        display: flex;/*定义flex容器*/
        flex-direction: column; /*当前主轴是上到下*/
        /**
         * align-content : 设置元素在主轴上的对齐方式
         * flex-start:和主轴顺着对齐
         * flex-end:和主轴相反
         * center: 居中
         * stretch:拉伸到和父元素那么宽（父元素）一样 ，元素没设置宽度的时候有效果
         * space-around : 顶端两端对齐（留空隙） 元素之间空白等比切分 【实验记得设置长宽】
         * space-between :  轴线两边的空白等比分 【实验记得设置长宽】
         * 
         * 
         */
        flex-wrap: wrap;    /*千万记得啊*/
        
        align-content: space-around;
        
        
    }
    
    .red{
        background-color: #FF0000;   
    }
    .green{
        background-color: #4CD964;
    }
    .blue{
        background-color: #007AFF;
    }
    .yellow{
        background-color: #ffff00;
    }
    
    .violet{
        background-color: #aa00ff;
    }
    .black{
        background-color: #000000;
    }
    .pink{
        background-color: #ff55ff;
    }
    .text{
        height: 100upx;
        font-size: 20px;
        color: #FFFFFF;
    }
</style>

 

属性5： order 设置元素的顺序 0开始 由小到大

<template>
    <view>
        <view class="container">

            <view class="red text" >
                红
            </view>
            <view class="green text"  >
                绿
            </view> 
            <view class="blue text"  >
                蓝
            </view>
            <view class="yellow text" >
                黄
            </view>
     
            
        </view>
        
    </view>
</template>

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

<style>
    .container{
        width: 750upx;
        height: 750upx;
        background-color: #000000;
        display: flex;/*定义flex容器*/
        flex-direction: row; /*当前主轴是左到右*/
        
    }
    
    .red{
        background-color: #FF0000;   
        order: 1; /*具体自己看效果  第二个*/
    }
    .green{
        background-color: #4CD964;
        order: 3;/*具体自己看效果  最后一个*/
    }
    .blue{
        background-color: #007AFF;
        order: 0;/*具体自己看效果  第一个*/
    }
    .yellow{
        background-color: #ffff00;
        order: 2;/*具体自己看效果  第三个*/
    }
    .text{
     font-size: 25px;
     width: 200upx;
     height: 10%;
    }
    
    
</style>

 ：

属性6：flex-grow 设置元素的放大比例  0 不放大  以上递增

<template>
    <view>
        <view class="container">

            <view class="red text" >
                红
            </view>
            <view class="green text"  >
                绿
            </view> 
            <view class="blue text"  >
                蓝
            </view>
            <view class="yellow text" >
                黄
            </view>
     
            
        </view>
        
    </view>
</template>

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

<style>
    .container{
        width: 750upx;
        height: 750upx;
        background-color: #000000;
        display: flex;/*定义flex容器*/
        flex-direction: row; /*当前主轴是左到右*/
        
    }
    
    .red{
        background-color: #FF0000;   
        flex-grow: 0; /*具体自己看效果  0 就是不放大*/
    }
    .green{
        background-color: #4CD964;
        flex-grow: 1; /*具体自己看效果  放大比例1*/
    }
    .blue{
        background-color: #007AFF;
        flex-grow: 1; /*具体自己看效果  放大比例1*/
    }
    .yellow{
        background-color: #ffff00;
        flex-grow: 3; /*具体自己看效果  放大比例3*/
    }
    .text{
     font-size: 25px;
     width: 200upx;
     height: 10%;
    }
    
    
</style>

 

属性7 ： flex-shrink属性设置子元素放小比例

<template>
    <view>
        <view class="container">

            <view class="red text" >
                红
            </view>
            <view class="green text"  >
                绿
            </view> 
            <view class="blue text"  >
                蓝
            </view>
            <view class="yellow text" >
                黄
            </view>
     
            
        </view>
        
    </view>
</template>

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

<style>
    .container{
        width: 550upx;
        height: 750upx;
        background-color: #000000;
        display: flex;/*定义flex容器*/
        flex-direction: row; /*当前主轴是左到右*/
        
    }
    /*
    *flex-shrink属性定义了子元素的缩小比例，默认为1，当父元素空间不足时，子元素将等比例缩小，如果其中一个子      元素flex-shrink为0其他为1，那么为0的不缩小其他等比例缩小。
    */
    .red{
        background-color: #FF0000;   
        flex-shrink: 1; /*具体自己看效果  1 就是不缩小*/
    }
    .green{
        background-color: #4CD964;
        flex-shrink: 2; /*具体自己看效果  2 当父元素不能容纳的时候才缩小*/
    }
    .blue{
        background-color: #007AFF;
        flex-shrink: 3; /*具体自己看效果  3 当父元素不能容纳的时候才缩小*/
    }
    .yellow{
        background-color: #ffff00;
        flex-shrink: 6; /*具体自己看效果 4 当父元素不能容纳的时候才缩小*/
    }
    .text{
     font-size: 25px;
     width: 750upx;
     height: 10%;
    }
    
    
</style>

 

属性8：     *flex-basis表示子元素被放入flex容器之前的大小，即你想要的子元素大小而不是其真实大小，子元素最终的大小取决于flex容器的宽度。

<template>
    <view>
        <view class="container">

            <view class="red text" >
                红
            </view>
            <view class="green text"  >
                绿
            </view> 
            <view class="blue text"  >
                蓝
            </view>
            <view class="yellow text" >
                黄
            </view>
            <view class="pink text" >
                粉
            </view>
     
            
        </view>
        
    </view>
</template>

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

<style>
    .container{
        width: 750upx;
        height: 750upx;
        background-color: #000000;
        display: flex;/*定义flex容器*/
        flex-direction: row; /*当前主轴是左到右*/
        
    }
    /*
    *flex-basis表示子元素被放入flex容器之前的大小，即你想要的子元素大小而不是其真实大小，子元素最终的大小取决于flex容器的宽度。
    */
   /*
    如果没设置的话 那么就是 319.99(宽) * 159.98(长)
   */
    .red{
        background-color: #FF0000;
        flex-basis: 10upx;      /* 25(宽) * 159.98(长)*/
    }
    .green{
        background-color: #4CD964;
    }
    .blue{
        background-color: #007AFF;
    }
    .yellow{
        background-color: #ffff00;

    }
    .pink{
        background-color: #ff00ff;
        
    }
    .text{
     font-size: 25px;
     width: 750upx;
     height: 10%;
    }
    
    
</style>

我也不知道怎么算的 反正就是这样。

 

属性9：