uni-app（3.flex布局）

1.Flex布局

1.概念、優勢、模型

2.容器的屬性和布局

3.容器內元素的屬性

1.Flex布局的概念、優勢、模型

1.概念：

1.flexible box:彈性盒裝布局

2.容器控制內部元素的布局定位

3.CSS3引入的新布局模型

4.伸縮元素，自由填充，自適應

2.優勢：

1.可在不同方向排列元素

2.控制元素排列的方向

3.控制元素的對齊方式

4.控制元素之間等距

5.控制單個元素放大與縮放比例、占比、對齊方式

3.常用術語：

1.flex container : flex 容器

2.flex item : flex 元素

3.flex direction：flex布局方向

4.模型：

 

 

 

 2.flex容器的屬性和布局

1.屬性

1.flex-direction：設置元素的排列方向

row 從左向右

row-reverse 從右到左

column 從上到下

column-reverse 從下到上

在pages下新建頁面flex-direction，並在pages.json中將flex-direction頁面設為首頁

在flex-direction目錄下新建css文件：flex-direction.css：

.container{

    /* 定義flex容器 */
    display: flex;
    flex-direction: row;
}
.txt{
    background-color: #007AFF;
    text-align: center;
    font-size: 50px;
    width: 150upx;
    height: 150upx;
}

flex-direction.vue：

<template>
    <view class="container">
        <view class="txt">
            1
        </view>
        <view class="txt">
            2
        </view>
        <view class="txt">
            3
        </view>
    </view>
</template>

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

<style>
@import url("flex-direction.css");
</style>

效果圖

 

 2.flex-wrap：使容器內的元素換行

 在pages目錄下新建flex-wrap頁面，在pages.json中將flex-wrap設為首頁

在flex-wrap目錄下新建flex-wrap.css

flex-wrap.vue：

<template>
    <view class="container">
        <view class="txt">
            1
        </view>
        <view class="txt">
            2
        </view>
        <view class="txt">
            3
        </view>
        <view class="txt">
            4
        </view>
        <view class="txt">
            5
        </view>
        <view class="txt">
            6
        </view>
    </view>
</template>

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

<style>
@import url("flex-wrap.css");
</style>

flex-wrap.css：

.container{

    /* 定義flex容器 */
    display: flex;
    /* flex-wrap: nowrap;不換行，默認 */
    /* flex-wrap: wrap;自動換行 */
}
.txt{
    background-color: green;
    text-align: center;
    font-size: 50px;
    width: 150upx;
    height: 150upx;
}

 3.justify-content：設置元素在主軸上排列，處理空白部分。

新建頁面justify-content，在pages.json中配置，設置為首頁。

在justify-content目錄下新建justify-content.css

justify-content.vue：

<template>
    <view class="container">
        <view class="txt">
            1
        </view>
        <view class="txt">
            2
        </view>
        <view class="txt">
            3
        </view>
    </view>
</template>

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

<style>
@import url("justify-content.css");
</style>

 

justify-content.css：

.container{

    /* 定義flex容器 */
    display: flex;
    flex-direction: row;
    
    /* 設置元素在主軸上的對齊方式 */
    /* 如果主軸是垂直方向的(flex-direction選了column,需要給設置高度,才能對立面的元素起效果) */
    /* flex-start (默認,左對齊 或者向上對齊) */
    /* flex-end 右對齊(注意,跟flex-direction的row-reverse的不同,順序沒變) */
    /* center居中對齊; */
    /* space-between 兩端對齊,元素之間均分空白間隙 */
    /* space-around 元素兩邊均分空白間隙,最左和最右的間隙跟元素之間的間隙是1:2的關系 */
    justify-content: space-around;
}
.txt{
    background-color: #007AFF;
    text-align: center;
    font-size: 50px;
    width: 150upx;
    height: 150upx;
}

 

4.align-items：設置元素在交叉軸上的對齊方式

新建頁面align-items，在pages.json中配置，設置為首頁。

在align-items目錄下新建align-items.css

flex-start

flex-end

center

baseline 所有文字不論文字尺寸，底部都在同一條線

stretch（默認）元素如果不設置高度，盒子設置了高度，元素的高度會拉伸到跟盒子等高。

align-items.vue：

<template>
    <view class="container">
        <view class="txt aaa">
            1
        </view>
        <view class="txt bbb">
            2
        </view>
        <view class="txt ccc">
            3
        </view>
    </view>
</template>

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

<style>
@import url("align-items.css");
</style>

align-items.css：

.container{

    /* 定義flex容器 */
    display: flex;
    /* 定義主軸方向 */
    flex-direction: row;
    justify-content: space-around;
    height: 800upx;
    /* 設置容器中元素在交叉軸上的對齊方式
    stretch:(默認)當元素的高度沒有設置,則元素的高度會拉伸至容器高度一致 
    flex-start：在交叉軸上向起點位置（向上或向左）對齊
    flex-end:在交叉軸的結束位置（向下或向右）對齊*/
    align-items: center;
}
.txt{
    background-color: green;
    text-align: center;
    font-size: 50px;
    width: 150upx;
    /* height: 150upx; */
}
.aaa{
    height: 150upx;
}
.bbb{
    height: 300upx;
}
.ccc{
    height: 450upx;
}

5.align-content多軸線的對齊方式。

6.flex元素屬性

新建頁面flex-items，在pages.json中配置為首頁。

在flex-items目錄下新建flex-items.css

flex-tiems.vue：

<template>
    <view class="container">
        <view class="txt aaa">
            1
        </view>
        <view class="txt bbb">
            2
        </view>
        <view class="txt ccc">
            3
        </view>

    </view>
</template>

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

<style>
@import url("flex-items.css");
</style>

flex-items.css：

.container{

    /* 定義flex容器 */
    display: flex;
    flex-direction: row;
    background-color: #F0AD4E;
    height: 600upx;

}
.txt{
    background-color: #007AFF;
    text-align: center;
    font-size: 20px;
    width: 150upx;
    height: 150upx;
}
/* order用於設置flex容器內部的每個元素的排列順序,默認是0排序順序,從小到大 */
/* flex-grow:用於設置元素的放大比例,默認是0
            如果為0則不放大。
            正整數代表了元素 剩余空間的分配比例，進行放大。前提是有空隙。
flex-shrink：用於設置元素的縮小比例。前提是元素總寬度，大於總寬度。
flex-basis：不需要前提，將元素寬度改變為flex-basis寬度*/
/* align-self:重寫元素在容器內的交叉軸上的對齊方式，auto表示默認，繼承容器的屬性 */
.aaa{
    background-color: #4CD964;
    order: 3;
    /* flex-grow: 1; */
    flex-basis: 300upx;
    align-self: center;
}
.bbb{
    background-color: #808080;
    order: 2;
    /* flex-grow: 1; */
}
.ccc{
    background-color: #007AFF;
    order: 1;
    /* flex-grow: 2; */
}