[JavaScript知识库]浅谈uniapp的flex布局

1 flex布局

? flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中，设置它的 display:flex。

1.1 flex-direction

? 容器类元素排列方向，它有四个参数可以选择。row（从左至右）； row-reverse （从右至左）； column（从上到下）； column-reverse（从下到上）。

<template>
	<view style="display: flex;flex-direction: row;">
		<view class="borderClass">A</view>
		<view class="borderClass">B</view>
		<view class="borderClass">C</view>
		<view class="borderClass">D</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
          
		}
	}
</script>

<style>
	.borderClass{
		width: 100upx;
		height: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
</style>

? 上面例子中flex-direction: row，表示从左到右，展示如下

? 如果设置成这样flex-direction: column，表示从上到下，则会变成如下的展示方式

? 如果设置成这样flex-direction: row-reverse，表示从右到左，则会变成如下的展示方式

? 如果设置成这样flex-direction: column-reverse，表示从下到上，则会变成如下的展示方式

1.2 flex-wrap

? flex-wrap用来表示容器内的元素换行，它有三个参数选择：nowrap（不换行）；wrap（换行 ）；wrap-reverse（反向换行）。

<template>
	<view style="display: flex;flex-direction: row;flex-wrap:wrap;">
		<view class="borderClass">A</view>
		<view class="borderClass">B</view>
		<view class="borderClass">C</view>
		<view class="borderClass">D</view>
		<view class="borderClass">E</view>
		<view class="borderClass">F</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
          
		}
	}
</script>

<style>
	.borderClass{
		width: 100upx;
		height: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
</style>

? 上面例子设置为flex-wrap:wrap;表示换行，展示如下：

? 设置为flex-wrap:wrap;表示不换行，展示如下：

1.3 justify-content

? 容器内元素在主轴的对齐方式，它主要有五个可选参数:flex-start(左对齐); flex-end(右对齐); center(居中对齐);space-between (等距对齐,两端对齐，空白分配在元素中间; space-around (等距对齐,两端对齐，但是两边留白）。

<template>
	<view style="display: flex;flex-direction: row;justify-content:space-between;">
		<view class="borderClass">A</view>
		<view class="borderClass">B</view>
		<view class="borderClass">C</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
          
		}
	}
</script>

<style>
	.borderClass{
		width: 100upx;
		height: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
</style>

? 展示效果如下：

? 如果改成justify-content:space-around;表示如下

1.4 align-items

? 定义容器内元素在纵轴上如何排列以及处理空白部分，主要有下面几个参数可选：stretch（如果容器内元素未设置高度，则默认元素高度为容器高度）； flex-start（容器的纵轴上部对齐）； flex-end （ 容器的纵轴下部对齐）； center（在容器的纵轴中部对齐）； baseline （如果容器中的元素中有文字，则按文字底部对齐）。

<template>
	<view style="display: flex;align-items:center;">
		<view class="heightAutoClass">A</view>
		<view style="width: 100upx;height: 200upx;background-color: #4CD964;margin: 20upx;">B</view>
		<view class="heightAutoClass">C</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
          
		}
	}
</script>

<style>
	.borderClass{
		width: 100upx;
		height: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
	
	.heightAutoClass{
		width: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
</style>

? 在这里要注意，上面三个元素中只有一个元素的高度是指定的，运行上面代码，展示如下：

? 如果将属性改成align-items:baseline，那么展示如下：

? 如果将属性设置为align-items:stretch，注意针对没有设置明确高度的元素生效，那么展示如下

1.5 align-content属性

? 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用（垂直方向）。align-content有六个值： flex-start | flex-end | center | space-between | space-around | stretch，分别对应整体靠上,整体靠下,整体居中,整体垂直拉伸,整体垂直均匀排列,整体均匀分布且垂直两端保留间距一半空间。

<template>
	<view style="display: flex;flex-wrap: wrap;border: 1upx solid red;height: 800upx;align-content: center;">
		<view class="heightAutoClass">A</view>
		<view style="width: 100upx;height: 200upx;background-color: #4CD964;margin: 20upx;">B</view>
		<view class="heightAutoClass">C</view>
		<view class="borderClass">D</view>
		<view class="borderClass">E</view>
		<view class="borderClass" style="width: 200upx;">F</view>
		<view class="borderClass">G</view>
		<view class="borderClass">H</view>
		<view class="borderClass">I</view>
		<view class="borderClass">J</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
          
		}
	}
</script>

<style>
	.borderClass{
		width: 100upx;
		height: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
	
	.heightAutoClass{
		width: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
</style>

? 运行上面代码，呈现整体居中的效果

? 如果改成align-content: space-between，变成如下

? 如果改成align-content: space-around，则展示如下：

? 如果改成align-content: stretch，则展示如下，这也是默认值

1.6 其他项目属性

1.6.1 order属性

? 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

<template>
	<view style="display: flex;">
		<view class="heightAutoClass" style="order: 2;">A</view>
		<view style="width: 100upx;height: 200upx;background-color: #4CD964;margin: 20upx;order: 1;">B</view>
		<view class="heightAutoClass" style="order: 3;">C</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
          
		}
	}
</script>

<style>
	.borderClass{
		width: 100upx;
		height: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
	
	.heightAutoClass{
		width: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
</style>

? 运行上面代码展示结果如下，B排在第一，A排在第二和配置信息一致

1.6.2 flex-grow属性

? 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

<template>
	<view style="display: flex;">
		<view class="borderClass">A</view>
		<view class="borderClass" style="flex-grow: 2;">B</view>
		<view class="borderClass">C</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
          
		}
	}
</script>

<style>
	.borderClass{
		width: 100upx;
		height: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
	
	.heightAutoClass{
		width: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
</style>

? 运行上面代码，展示内容如下：

? 注：如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

1.6.3 flex-shrink属性

? 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

<template>
	<view style="display: flex;">
		<view class="borderClass">A</view>
		<view class="borderClass">B</view>
		<view class="borderClass">C</view>
		<view class="borderClass" style="flex-shrink: 0;">D</view>
		<view class="borderClass">E</view>
		<view class="borderClass">F</view>
		<view class="borderClass">G</view>
		<view class="borderClass">H</view>
		<view class="borderClass">I</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
          
		}
	}
</script>

<style>
	.borderClass{
		width: 100upx;
		height: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
	
	.heightAutoClass{
		width: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
</style>

? 运行上面代码展示结果如下：

? 这是因为所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。上面的例子中元素D没有压缩。

1.6.4 flex属性

? 是flex-grow（放大比例）, flex-shrink（缩小比例） 和 flex-basis（计算多余空间）的简写，默认值为0。可选1和auto，也可以是其他数字。

<template>
	<view style="display: flex;border: 1px solid red;">
		<view class="borderClass" style="flex:1">A</view>
		<view class="borderClass" style="flex:1.5">B</view>
		<view class="borderClass" style="flex:2">C</view>
		<view class="borderClass" style="flex:2.5">C</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
          
		}
	}
</script>

<style>
	.borderClass{
		width: 100upx;
		height: 200upx;
		background-color: #4CD964;
		margin: 20upx;
	}
	
	.heightAutoClass{
		width: 100upx;
		background-color: #4CD964;
		margin: 20upx;
	}
</style>

? 运行上面代码，展示结果如下：

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖