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; */
}