【uni-app】Flex布局

Flex布局的概念

特点：

1. flexible box：弹性盒状布局
2. 容器控制内部元素的布局定位
3. CSS3引入的新布局模型
4. 伸缩元素，自由填充，自适应

---

优势：

1. 可在不同方向排列元素
2. 控制元素排序的方向
3. 控制元素的对齐方式
4. 控制元素之间等距
5. 控制单个元素放大与缩放比例、占比、对齐方式

---

flex布局的常用术语：

1. flex container:flex容器
2. flex item:flex项目（元素）
3. flex direction：布局方向

主轴可以是水平的，也可以是垂直的，需要我们去设置

Flex的属性

flex-direction：设置元素的排列方向

参数：

row 从左到右排序
主轴是横向的

row-reverse 从右向左排序
主轴是横向的的

column 从上到下排序
主轴是垂直的

column-reverse 从下到上排序
主轴是垂直的

row

<template>
<view class="container">
	<!-- 	可以定义各种各样的组件来配合flex布局 -->
		<view class="green text"> 
			A
		</view>
		
		<view class="blue text"> 
			B
		</view>
		
		<view class="red text"> 
			C
		</view>
		
		<view class="orange text"> 
			D
		</view>
		
		<view class="black text"> 
			E
		</view>
	</view>
</template>


<script>
	//VM：协调者调度器
	export default {
		//Model所有的数据
		data() {
			return {
				title: 'Hello uni-app',
				student:{
					age:18
				},
				skill:["Java","HTML","CSS","JavaScript","Python"],
				url:"../Hello/Hello"
			}
		},
		onLoad() {

		},
		methods: {
			change(e){
				var txtTitle = e.detail.value;  //获取值
				//debugger;  //断点
				this.title = txtTitle;
			}
		}
	}
</script>


<style>
	.container{
		/* 定义flex容器 */
		display: flex;
         /*设置容器内部容器的排列方向*/	
		flex-direction: row; 
	}
	.green{
		background-color: green;
	}
	.blue{
		background-color: blue;
	}
	.red{
		background-color: red;
	}
	.black{
		background-color: black;
	}
	.orange{
		background-color: orange;
	}
	.text{
		font-size: 20upx;
		width: 150upx;
		height: 150upx;
	}
</style>

结果：

flex-direction改为row-reverse

改为column

改为column-reverse

---

样式与代码的分离;
同级目录下mycss.css

.container{
		/* 定义flex容器 */
		display: flex;
         /*设置容器内部容器的排列方向*/	
		flex-direction: column-reverse; 
	}
	.green{
		background-color: green;
	}
	.blue{
		background-color: blue;
	}
	.red{
		background-color: red;
	}
	.black{
		background-color: black;
	}
	.orange{
		background-color: orange;
	}
	.text{
		font-size: 20upx;
		width: 150upx;
		height: 150upx;
	}

在vue文件的style中写入

<style>
	@import url("mycss.css");
</style>

---

flex-wrap： 使容器内的元素换行

nowrap 不换行
wrap 换行
wrap-reverse 逆向换行排序

<template>
<view class="container">
	<!-- 	可以定义各种各样的组件来配合flex布局 -->
		<view class="green text"> 
			A
		</view>
		
		<view class="blue text"> 
			B
		</view>
		
		<view class="red text"> 
			C
		</view>
		
		<view class="orange text"> 
			D
		</view>
		
		<view class="black text"> 
			E
		</view>
	</view>
</template>


<script>
	//VM：协调者调度器
	export default {
		//Model所有的数据
		data() {
			return {
			
			}
		},
		onLoad() {

		},
		methods: {
		
		}
	}
</script>


<style>
	@import url("mycss.css");
</style>

样式：

.container{
		/* 定义flex容器 */
		display: flex;
         /*设置容器内部容器的排列方向*/	
		flex-direction: row;
		flex-wrap:wrap;
		
	}
	.green{
		background-color: green;
	}
	.blue{
		background-color: blue;
	}
	.red{
		background-color: red;
	}
	.black{
		background-color: black;
	}
	.orange{
		background-color: orange;
	}
	.text{
		font-size: 20upx;
		width: 200upx;
		height: 200upx;
	}

结果：

flex-wrap 改成nowrap

发现他们自动压缩了
flex-wrap改为wrap-reverse

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

想象成沿对角线折叠

根据主轴方向的不同：
flex-start 左对齐 或者 向上对齐
flex-end 右对齐 或者 向下对齐
center 居中对齐

留有间隙
space-between 两端对齐，空白均匀地填充到flex成员项之间。
space-around 元素两边平均等分剩余空白间隙部分，最左或最右和元素之间距离是1：2

justify-content 为center的时候

.container{
		/* 定义flex容器 */
		display: flex;
         /*设置容器内部容器的排列方向*/	
		flex-direction: row;
		justify-content: center;
		
	}
	.green{
		background-color: green;
	}
	.blue{
		background-color: blue;
	}
	.red{
		background-color: red;
	}
	.black{
		background-color: black;
	}
	.orange{
		background-color: orange;
	}
	.text{
		font-size: 100upx;
		width: 120upx;
		height: 120upx;
	}

<template>
<view class="container">
	<!-- 	可以定义各种各样的组件来配合flex布局 -->
		<view class="green text"> 
			A
		</view>
		
		<view class="blue text"> 
			B
		</view>
		
		<view class="red text"> 
			C
		</view>
		
		<view class="orange text"> 
			D
		</view>
		
		<view class="black text"> 
			E
		</view>
	</view>
</template>


<script>
	//VM：协调者调度器
	export default {
		//Model所有的数据
		data() {
			return {
			
			}
		},
		onLoad() {

		},
		methods: {
		
		}
	}
</script>


<style>
	@import url("mycss.css");
</style>

justify-content 为flex-start的时候

justify-content 为flex-end的时候

justify-content 为space-around时候：

justify-content 为space-between时候：

切换主轴会出现水平变垂直 垂直的变水平的情况
把flex-direction改为column

之所以挨着 是因为垂直方向没有设置相应的高度
更改：

.container{
		/* 定义flex容器 */
		display: flex;
         /*设置容器内部容器的排列方向*/	
		flex-direction: column;
		justify-content: space-between;
		height: 800upx;
		width: 100%;
		background-color: #39B54A;
	}

结果

align-items：设置元素在交叉轴上的对齐方式

flex-start 上对齐，所有的成员项排列在容器顶部。

flex-end 下对齐，所有的成员项排列在容器底部。

center 中间对齐，所有成员项都垂直地居中显示。

baseline 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）

stretch（默认） 拉伸高度至flex容器的大小。
注意这里没有设置内部的项目的高度 只有宽度
但是设置了最外围的容器的高度

aligin-items的值为stretch的时候

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction: row;
		align-items: stretch;
		
		height: 800upx;
		background-color: #AAAAAA;
	}
	.green{
		background-color: green;
	}
	.blue{
		background-color: blue;
	}
	.red{
		background-color: red;
	}
	.black{
		background-color: black;
	}
	.orange{
		background-color: orange;
	}
	.text{
		font-size: 100upx;
		width: 120upx;
	}

aligin-items的值为flex-start的时候:

aligin-items的值为flex-end的时候

aligin-items的值为center的时候

align-items的值为baseline

如果高度不同的话 会出现这种情况 baselline

align-content：设置轴线的对齐方式（轴线当做元素）

当轴线超过1条(多行)的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐

flex-start 向左对齐

flex-end 向右对齐

center 居中

stretch 当宽度width没有设置的时候，轴线可以被拉伸

space-between 两端对齐，元素之间的空白等比切分

space-around 轴线两边的空白等比切分

/* align-content: center; */注释了 这部分

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		height: 600upx;
		background-color: #AAAAAA;
		/* align-content: center; */
	}
	.green{
		background-color: green;
	}
	.blue{
		background-color: blue;
	}
	.red{
		background-color: red;
	}
	.black{
		background-color: black;
	}
	.orange{
		background-color: orange;
	}
	.text{
		font-size: 100upx;
		width: 180upx;
		height: 180upx;
	}

align-content: center

align-content为flex-start的时候

align-content为flex-end的时候

align-content为stretch的时候(默认)

将高度注释掉

并没有被拉伸
原因是 我们的排列元素是竖直的。
我们把宽度注释掉（保留高度）

align-content为space-between的时候

align-content为space-around的时候

Flex元素的属性

order：控制元素顺序

用于设置flex容器内部的每个元素的排列顺序，默认是e排序规则，有小到大

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction: row;
	}
	.green{
		background-color: green;
		order: 1;
	}
	.blue{
		background-color: blue;
		order: 2;
	}
	.red{
		background-color: red;
		order: 3;
	}
	.black{
		background-color: black;
		order: 4;
	}
	.orange{
		background-color: orange;
		order: 5;
	}
	.text{
		font-size: 100upx;
		 width: 120upx; 
		height: 120upx;
	}

order的值越小 越排在前面

flex-grow：控制元素放大比例

默认值为0 不会放大

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction: row;
	}
	.green{
		background-color: green;
		flex-grow: 1;
	}
	.blue{
		background-color: blue;
	}
	.red{
		background-color: red;
		
	}
	.black{
		background-color: black;
	
	}
	.orange{
		background-color: orange;
		
	}
	.text{
		font-size: 100upx;
		 width: 120upx; 
		height: 120upx;
	}

结果为：

---

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction: row;
	}
	.green{
		background-color: green;
		flex-grow: 1;
	}
	.blue{
		background-color: blue;
		flex-grow: 1;
	}
	.red{
		background-color: red;
		
	}
	.black{
		background-color: black;
	
	}
	.orange{
		background-color: orange;
		
	}
	.text{
		font-size: 100upx;
		 width: 120upx; 
		height: 120upx;
	}

结果为：

做了等比的切分

---

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction: row;
	}
	.green{
		background-color: green;
		flex-grow: 1;
	}
	.blue{
		background-color: blue;
		flex-grow: 3;
	}
	.red{
		background-color: red;
		flex-grow: 1;
	}
	.black{
		background-color: black;
	
	}
	.orange{
		background-color: orange;
		
	}
	.text{
		font-size: 100upx;
		 width: 120upx; 
		height: 120upx;
	}

结果为：

flex-shrink：控制元素缩小比例

前提是空间不够

flex-shrink：用于定义属性的缩放比例，默认为1设置为e的时候，不进行缩放

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction: row;
	}
	.green{
		background-color: green;
		
	}
	.blue{
		background-color: blue;
		
	}
	.red{
		background-color: red;
		
	}
	.black{
		background-color: black;
	
	}
	.orange{
		background-color: orange;
		
	}
	.text{
		font-size: 100upx;
		 width: 200upx; 
		height: 200upx;
	}

默认情况下：

---

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction: row;
	}
	.green{
		background-color: green;
		flex-shrink: 4;
	}
	.blue{
		background-color: blue;
		flex-shrink: 4;
	}
	.red{
		background-color: red;
		flex-shrink: 4;
	}
	.black{
		background-color: black;
	
	}
	.orange{
		background-color: orange;
		
	}
	.text{
		font-size: 100upx;
		 width: 200upx; 
		height: 200upx;
	}

---

如果值为0 则不进行缩放

flex-basis：设置元素固定或自动空间的占比

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction: row;
	}
	.green{
		background-color: green;
		flex-basis: 200upx;
	}
	.blue{
		background-color: blue;

	}
	.red{
		background-color: red;

	}
	.black{
		background-color: black;
	
	}
	.orange{
		background-color: orange;
		
	}
	.text{
		font-size: 100upx;
		 width: 120upx; 
		height: 120upx;
	}

这里进行放大

如果 flex-basis改为100 则会进行缩放

align-self：重写align-items父属性

重写容器中元素在交叉轴上的对齐方式

auto：默认，表示继承父级元素的align-items属性

stretch：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致

flex-starl：在交叉轴上向起点位置（向上/向左）对齐

flex-end：在交叉轴上向结束位置（向下/向右）对齐

center：居中对齐

baseline：保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction:row ;
		align-items: baseline;
		height: 800upx;
		background-color: #AAAAAA
	}
	.green{
		background-color: green;
		align-self: center;
	}
	.blue{
		background-color: blue;

	}
	.red{
		background-color: red;

	}
	.black{
		background-color: black;
	
	}
	.orange{
		background-color: orange;
		
	}
	.text{
		font-size: 100upx;
		width: 120upx; 
		height: 120upx;
	}

结果：

---

.container{
		/* 定义flex容器 */
		display: flex;
		flex-direction:row ;
		align-items: baseline;
		height: 800upx;
		background-color: #AAAAAA
	}
	.green{
		background-color: green;
		align-self: center;
	}
	.blue{
		background-color: blue;
		align-self: flex-end;
	}
	.red{
		background-color: red;
		align-self: center;
	}
	.black{
		background-color: black;
	
	}
	.orange{
		background-color: orange;
		
	}
	.text{
		font-size: 100upx;
		width: 120upx; 
		height: 120upx;
	}

结果：