【Uni-App社区小程序】011-flex布局

目录

一、我们的默认写法

1、代码

2、运行结果

二、flex基本使用

1、使得四个正方形在一行显示

代码：

结果：

2、加入我们再加两个正方形

代码：

结果：

3、自动换行

代码：

结果：

4、倒序换行

代码：

结果：

5、子组件居中显示（设置子组件对齐方式）

代码：

结果：

6、垂直居中

代码：

结果：

7、从上到下排列

代码：

结果：

8、设置指定的元素不被压缩

阐述：

代码：

结果：

9、两个（多个）元素平均分配宽度

代码：

运行结果：

10、根据权重分配宽度

描述：

代码：

运行结果：

---

一、我们的默认写法

1、代码

<template>
		<view class="box">
			<view class="box-item">1</view>
			<view class="box-item">2</view>
			<view class="box-item">3</view>
			<view class="box-item">4</view>
		</view>
	</view>
</template>

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

<style>
	.box{
		height: 500upx;
		width: 100%;
		border: 1upx solid #CCCCCC;
	}
	.box-item{
		background: #1AAD19;
		color: #FFFFFF;
		height: 200upx;
		width: 200upx;
		line-height: 200upx;
		font-size: 30upx;
		font-weight: bold;
		text-align: center;
	}
	.box-item:nth-of-type(odd){
		background: #09BB07;
	}
	.box-item:nth-of-type(even){
		background: #F76260;
	}
</style>

 

2、运行结果

 

二、flex基本使用

参考教程（阮一峰的flex教程）：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

另一篇参考文章：https://blog.csdn.net/Allenyhy/article/details/81605547

1、使得四个正方形在一行显示

代码：

 

结果：

 

2、加入我们再加两个正方形

代码：

 

结果：

 

3、自动换行

代码：

 

结果：

 

4、倒序换行

代码：

 

结果：

 

5、子组件居中显示（设置子组件对齐方式）

代码：

（不仅仅是居中，还有两端对齐等等）

（justify-content属性教程https://www.runoob.com/cssref/css3-pr-justify-content.html）

 

结果：

（我们事先删除了其他四个正方形）

 

6、垂直居中

代码：

（水平居中和垂直居中可以一起用！）

 

结果：

 

7、从上到下排列

代码：

 

结果：

 

8、设置指定的元素不被压缩

阐述：

代码：

<template>
		<view class="box">
			<view class="box-item">1</view>
			<view class="box-item">2</view>
			<view class="box-item">3</view>
			<view class="box-item">4</view>
			<view class="box-item">5</view>
			<view class="box-item">6</view>
		</view>
	</view>
</template>

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

<style>
	.box{
		height: 500upx;
		width: 100%;
		border: 1upx solid #CCCCCC;
		/* 使得四个正方形在一行显示,只需加一行代码 */
		display: flex;
		/* flex-direction: column; */
		/* 子组件居中显示 */
		/* justify-content: center; */
		/* 垂直居中 */
		/* align-items: center; */
	}
	.box-item{
		background: #1AAD19;
		color: #FFFFFF;
		height: 200upx;
		width: 200upx;
		line-height: 200upx;
		font-size: 30upx;
		font-weight: bold;
		text-align: center;
	}
	.box-item:nth-of-type(odd){
		background: #09BB07;
	}
	.box-item:nth-of-type(even){
		background: #F76260;
	}
	/* 设置第二个元素不被压缩 */
	.box-item:nth-child(2){
		flex-shrink: 0;/* 默认1是被压缩 */
	}
</style>

 

结果：

 

9、两个（多个）元素平均分配宽度

代码：

<template>
		<view class="box">
			<view class="box-item">1</view>
			<view class="box-item">2</view>
			<view class="box-item">3</view>
		</view>
	</view>
</template>

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

<style>
	.box{
		height: 500upx;
		width: 100%;
		border: 1upx solid #CCCCCC;
		/* 使得四个正方形在一行显示,只需加一行代码 */
		display: flex;
		/* flex-direction: column; */
		/* 子组件居中显示 */
		/* justify-content: center; */
		/* 垂直居中 */
		/* align-items: center; */
	}
	.box-item{
		background: #1AAD19;
		color: #FFFFFF;
		height: 200upx;
		/* 我们一般会将宽度设置为50%，但三个怎么办？四个呢？ */
		/* width: 50%; */
		/* 使用flex使得平均每个占一份 */
		flex: 1;
		line-height: 200upx;
		font-size: 30upx;
		font-weight: bold;
		text-align: center;
	}
	.box-item:nth-of-type(odd){
		background: #09BB07;
	}
	.box-item:nth-of-type(even){
		background: #F76260;
	}
	/* 设置第二个元素不被压缩 */
	/* .box-item:nth-child(2){
		flex-shrink: 0;/* 默认1是被压缩
	} */
</style>

运行结果：

 

10、根据权重分配宽度

描述：

代码：

<template>
		<view class="box">
			<view class="box-item">1</view>
			<view class="box-item">2</view>
			<view class="box-item">3</view>
		</view>
	</view>
</template>

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

<style>
	.box{
		height: 500upx;
		width: 100%;
		border: 1upx solid #CCCCCC;
		/* 使得四个正方形在一行显示,只需加一行代码 */
		display: flex;
		/* flex-direction: column; */
		/* 子组件居中显示 */
		/* justify-content: center; */
		/* 垂直居中 */
		/* align-items: center; */
	}
	.box-item{
		background: #1AAD19;
		color: #FFFFFF;
		height: 200upx;
		/* 我们一般会将宽度设置为50%，但三个怎么办？四个呢？ */
		/* width: 50%; */
		/* 使用flex使得平均每个占一份 */
		flex: 1;
		line-height: 200upx;
		font-size: 30upx;
		font-weight: bold;
		text-align: center;
	}
	.box-item:nth-of-type(odd){
		background: #09BB07;
	}
	.box-item:nth-of-type(even){
		background: #F76260;
	}
	/* 设置第二个元素不被压缩 */
	/* .box-item:nth-child(2){
		flex-shrink: 0;/* 默认1是被压缩
	} */
	/* 根据权重分配宽度 */
	.box-item:nth-of-type(1){
		flex: 1;
	}
	.box-item:nth-of-type(2){
		flex: 2;
	}
	.box-item:nth-of-type(3){
		flex: 1;
	}
</style>

运行结果：