浅谈uniapp的flex布局

1 flex布局flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中，设置它的 display:flex。1.1 flex-direction容器类元素排列方向，它有四个参数可以选择。row（从左至右）； row-reverse （从右至左）； column（从上到下）； column-reverse（从下到上）。&l

dream21st

11683人浏览 · 2022-05-10 21:53:44

dream21st · 2022-05-10 21:53:44 发布

文章目录

1 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，表示从左到右，展示如下

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kQ1DgIjl-1652190460169)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509223427355.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-skv2zVQ0-1652190460177)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509223629300.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yOlKlFnx-1652190460179)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509223814306.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7YBPJTp8-1652190460191)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509223903483.png)]$

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;表示换行，展示如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AnWmX8DX-1652190460193)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509225000243.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MMUUcYlV-1652190460194)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509225033208.png)]$

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>

展示效果如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1pqZwvU-1652190460196)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509225658708.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AW3hFnnW-1652190460197)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509225751706.png)]$

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>

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-APFuDy16-1652190460198)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510073435690.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WDJauJuc-1652190460199)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510073611838.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H5N0710k-1652190460202)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510073734622.png)]$

1.5 align-content属性

<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>

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxjYN4Uj-1652190460204)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510074646669.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UHMXTTLp-1652190460205)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510074747688.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gQZ9Y2TJ-1652190460207)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510082656272.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PeTpfPXU-1652190460208)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510082826193.png)]$

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排在第二和配置信息一致

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zbcHgatF-1652190460209)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510084046599.png)]$

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>

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gDn2mfTL-1652190460210)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510084828241.png)]$

注：如果所有项目的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>

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mK4PBJxC-1652190460211)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510085207332.png)]$

这是因为所有项目的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>

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KzeSZh5V-1652190460212)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510214618974.png)]$