浅谈uniapp的flex布局

news2025/1/31 3:10:09

文章目录

  • 1 flex布局
    • 1.1 flex-direction
    • 1.2 flex-wrap
    • 1.3 justify-content
    • 1.4 align-items
    • 1.5 align-content属性
    • 1.6 其他项目属性
      • 1.6.1 order属性
      • 1.6.2 flex-grow属性
      • 1.6.3 flex-shrink属性
      • 1.6.4 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属性

​ 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用（垂直方向）。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>

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407654.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

TypeError: this.$message is not a function报错情况解决

TypeError: this.$message is not a function报错情况解决

在最近负责的一个前端项目中&#xff0c;使用this.$message报错了&#xff0c;之前也没注意&#xff0c;然后这次抽空看了一下问题 报错原因是因为我用了这种提示写法&#xff1a; 首先&#xff0c;我最开始是用基础写法&#xff1a; 但是这种写法有个弊端&#xff0c;就是如…
阅读更多...
【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

⌚️⌚️⌚️个人格言&#xff1a;时间是亳不留情的&#xff0c;它真使人在自己制造的镜子里照见自己的真相! &#x1f4d6;Git专栏&#xff1a;&#x1f4d1;Git篇&#x1f525;&#x1f525;&#x1f525; &#x1f4d6;JavaScript专栏&#xff1a;&#x1f4d1;js实用技巧篇…
阅读更多...
腾讯地图api使用——地图选点自动定位到当前位置

腾讯地图api使用——地图选点自动定位到当前位置

WebService API | 腾讯位置服务 用户在使用腾讯地图api时&#xff0c;需先申请腾讯位置服务API Key&#xff0c;该key在调用时用于唯一标识开发者身份。 1.自动获取当前位置 引入以下js文件 https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js //获…
阅读更多...
FAST_LIO_SAM 融入后端优化的FASTLIO SLAM 系统 前端：FAST_LIO2 后端：LIO_SAM

FAST_LIO_SAM 融入后端优化的FASTLIO SLAM 系统 前端：FAST_LIO2 后端：LIO_SAM

FAST_LIO_SAM Front_end : fastlio2 Back_end : lio_sam Videos : FAST-LIO-SAM Bilibili_link Source code : FAST_LIO_SAM Related worked 1.FAST-LIO2为紧耦合的lio slam系统&#xff0c;因其缺乏前端&#xff0c;所以缺少全局一致性&#xff0c;参考lio_sam的后端部分&…
阅读更多...
Vue3 reactive丢失响应式问题

Vue3 reactive丢失响应式问题

问题描述&#xff1a;使用 reactive 定义的对象&#xff0c;重新赋值后失去了响应式&#xff0c;改变值视图不会发生变化。 测试代码&#xff1a; <template><div><p>{{ title }}</p><ul><li v-for"(item, index) in tableData" …
阅读更多...
【小程序】组件化开发的基本使用(一)

【小程序】组件化开发的基本使用(一)

文章目录小程序组件化开发基本使用小程序组件化思想自定义组件的过程组件样式实现细节小程序组件化开发基本使用 小程序组件化思想 组件插槽定义使用 小程序在刚刚推出时是不支持组件化的, 也是为人诟病的一个点&#xff1a; 但是从v1.6.3开始, 小程序开始支持自定义组件开发…
阅读更多...
如何创建一个简易的HTML网页框架

如何创建一个简易的HTML网页框架

背景&#xff1a; 在我们初步学习了web前端开发的一些知识时&#xff0c;我们可能会考虑构建一个简单的html网站&#xff0c;但是&#xff0c;如何着手去开始我们的网站&#xff0c;对于新手来说可能是个问题。 在这篇文章中&#xff0c;我将介绍我在构建一个简易的网页时&am…
阅读更多...
Vue2中使用axios的三种方法

Vue2中使用axios的三种方法

第一种 原始方法 直接在项目中使用(不建议使用) 这种方法最简单粗暴 优点&#xff1a;不需要做封装&#xff0c;不需要做配置傻瓜式操作&#xff0c;不需要做异步处理 缺点&#xff1a;代码太繁琐&#xff0c;当遇到请求过多的时候&#xff0c;这样写不适合读写 注意&#…
阅读更多...
使用videojs播放m3u8视频

使用videojs播放m3u8视频

vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库&#xff0c;可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频。流媒体传输协议(hls)定义了用来控制播放的m3u8文件 m3u8是一个文本文件(播放列表文件)&#xff0c;里面的内容就是被播放的音视频文件路…
阅读更多...
vue3 - 组件注册和组件通信（setup语法糖）

vue3 - 组件注册和组件通信（setup语法糖）

这里介绍的是vue3中组件的注册和组件通信父传子&#xff0c;子传父。 前提&#xff1a;用的是vue3版本且使用了setup语法糖 <script setup> .....<script> 1&#xff0c;组件注册 1.1&#xff0c;全局注册&#xff1a; 全局注册需要在 在main.js中进行注册&#x…
阅读更多...
SpringBoot整合调用微信模板方法实现微信公众号消息通知推送，Java实现微信公众号给关注用户推送自定义消息通知（手把手从0到1）

SpringBoot整合调用微信模板方法实现微信公众号消息通知推送，Java实现微信公众号给关注用户推送自定义消息通知（手把手从0到1）

目录 概述 公众号给关注用户推送自定义消息 一、申请公众号模板消息 二、获取安装“web开发者工具” 三、微信网页授权说明 四、微信网页授权 - 流程时序图 五、HTTPClient 实现微信公众号消息推送与发布&#xff08;四步走&#xff09; 六、通过weixin-java-mp SDK实现…
阅读更多...
flex布局（弹性盒子一）

flex布局（弹性盒子一）

目录 一、弹性盒子的开启 二、弹性盒子的不同样式 1.flex-direction&#xff1a;子项目的排列方向 2.flex-wrap&#xff1a;子项目多行 3. flex-flow 是flex-direction和flex-wrap的一起指定&#xff08;简写&#xff09; 一、弹性盒子的开启 设置内容区的样式&#xff1a…
阅读更多...
Vue组件库实现按需引入可以这么做

Vue组件库实现按需引入可以这么做

本文为Varlet组件库源码主题阅读系列第七篇&#xff0c;读完本篇&#xff0c;可以了解到如何通过unplugin-vue-components插件来为你的组件库实现按需引入。 手动引入 前面的文章中我们介绍过Varlet组件库的打包流程&#xff0c;最后会打包成几种格式&#xff0c;其中module和…
阅读更多...
JavaScript对象

JavaScript对象

文章目录前言一、对象1.1什么是对象1.2为什么需要对象二、创建对象的三种方式1.利用字面量创建对象2.对象的调用2.1变量、属性、函数、方法总结3.利用new Object创建对象3.1利用构造函数创建对象4.new关键字总结前言 一、对象 1.1什么是对象 现实生活中&#xff1a;万物皆对象…
阅读更多...
vue-在组件中使用v-model

vue-在组件中使用v-model

一、使用场景 子组件想要使用父组件的值,又想去改父组件的值 二、V-Model的本质 1.给子组件的 value 传个变量 2.监听子组件的input事件,并且把传过来的值赋给父组件的变量 三、关键步骤 1. props 的使用 在自定义的 vue 文件中&#xff0c;声明父组件要向子组件传递的 pr…
阅读更多...
左右等高布局

左右等高布局

开篇概述 作为这个专栏的开篇&#xff0c;简单介绍一下开这个专栏的初衷。之前在团队中做代码 review 时&#xff0c;经常会发现一些不太“健壮”的 css 代码。这些不太“健壮”的 css 代码&#xff0c;当遇到一些特殊情况时&#xff0c;界面显示就有可能出现问题。其中&#…
阅读更多...
uniapp/vue虚拟列表，数据列表渲染优化

uniapp/vue虚拟列表，数据列表渲染优化

引言 相信大家经常会遇到展示一堆数据的需求&#xff0c;几十条数据还好&#xff0c;要是几百上千条&#xff0c;甚至带上了图片。那就会卡得不行。这时候就需要按需加载。 按需加载有懒加载和虚拟列表。 懒加载&#xff1a;通过JS滚动或触底触发事件来加载更多的数据&#…
阅读更多...
报错“Cannot read properties of null (reading ‘addEventListener‘)“

报错“Cannot read properties of null (reading ‘addEventListener‘)“

场景 控制台报错"Cannot read properties of null (reading addEventListener)" 错误原因 因为 JavaScript 中操作DOM元素的函数方法需要在 HTML 文档渲染完成后才可以使用&#xff0c;如果没有渲染完成&#xff0c;此时的 DOM 树是不完整的&#xff0c;这样在调用…
阅读更多...
css鼠标变成小手(css中鼠标悬停是为小手)

css鼠标变成小手(css中鼠标悬停是为小手)

CSS控制鼠标样式变换如何写代码呢&#xff1f; 代码&#xff1a;&#xff1a;p stylecursor: crosshair演示&#xff1a;定位指示/p如果需要将鼠标变换成帮助状态的时候。代码&#xff1a;p stylecursor: help演示&#xff1a;帮助/p当然这些只是一些常见的比较实用的代码。我们…
阅读更多...
前端实现可拖拽流程的js框架

前端实现可拖拽流程的js框架

1 AntV X6 是 AntV 旗下的图编辑引擎&#xff0c;提供了一系列开箱即用的交互组件和简单易用的节点定制能力&#xff0c;方便我们快速搭建 DAG 图、ER 图、流程图等应用。 XFlow是基于 X6 图编辑引擎、面向 React 技术栈用户的专业图编辑应用级解决方案, 帮助您轻松开发复杂的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023