小程序-Flex布局详解

最新推荐文章于 2024-07-13 21:52:23 发布
最新推荐文章于 2024-07-13 21:52:23 发布
阅读量675 收藏 10
点赞数 10
分类专栏： uni-app 文章标签： 小程序 vue.js 弹性布局 flex布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengcheng9876/article/details/140152712
版权

文章目录

Flex布局的概念

1. 传统布局

盒子模型：我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

  • 内容(content)：这是盒子模型的核心，包含了文本、图像或其他元素的实际内容。
  • 内边距(padding)：位于内容和边框之间的空间，用于控制内容与边框之间的间距。
  • 边框(border)：围绕在内边距和内容外部的线条，用于定义元素的可见边界。
  • 外边距(margin)：位于边框外部的空间，用于控制元素与其周围元素之间的距离。
    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
    在这里插入图片描述

2. flex布局

Flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。

  1. 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
  2. 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

3. Flex布局声明

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

<template>
	<view class="content">
		<view class="text-area">
			1
		</view>
		<view class="text-area">
			2
		</view>
		<view class="text-area">
			3
		</view>
	</view>
	<text class="text_list">
		<text>4</text>
		<text>5</text>
		<text>6</text>
		<text>7</text>
	</text>
</template>

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

	},
	methods: {

	}
}
</script>

<style>
	.content {
		display: flex;
	}
	.text-area {
		width: 30vw;
		height: 100px;
		border: solid 1px red;
		text-align: center;
	}
	.text_list{
		width: 100vw;
		display: inline-flex;
		justify-content: center;
	}
</style>

在这里插入图片描述

Flex的容器属性

Flex布局的容器属性主要有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

1. flex-direction属性决定主轴的方向（即项目的排列方向）

  • row（默认值）：主轴为水平方向，起点在左端。
    在这里插入图片描述
  • row-reverse：主轴为水平方向，起点在右端。
    在这里插入图片描述
  • column：主轴为垂直方向，起点在上沿。
    在这里插入图片描述
  • column-reverse：主轴为垂直方向，起点在下沿。
    在这里插入图片描述

2. flex-wrap属性

flex-wrap属性用于控制项目是否换行。

  • nowrap（默认）：不换行。
    在这里插入图片描述
  • wrap：换行，第一行在上方。
    在这里插入图片描述
  • wrap-reverse：换行，第一行在下方。
    在这里插入图片描述

3. flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

4. justify-content属性

justify-content属性用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的- - flex-end为右对齐。
在这里插入图片描述

  • flex-start（默认值）：左对齐
    在这里插入图片描述
  • center： 居中
    在这里插入图片描述
  • space-between：两端对齐，项目之间的间隔都相等。
    在这里插入图片描述
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
    在这里插入图片描述

5. align-items属性

  • flex-start：交叉轴的起点对齐。
    在这里插入图片描述

  • flex-end：交叉轴的终点对齐。
    在这里插入图片描述

  • center：交叉轴的中点对齐。
    在这里插入图片描述

  • baseline: 项目的第一行文字的基线对齐。
    在这里插入图片描述

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
    在这里插入图片描述
    注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。

6. align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  • flex-start 与交叉轴的起点对齐。
    在这里插入图片描述
  • flex-end 与交叉轴的终点对齐。
    在这里插入图片描述
  • center：与交叉轴的中点对齐。
    在这里插入图片描述
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    在这里插入图片描述
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    在这里插入图片描述
  • stretch（默认值）：轴线占满整个交叉轴。
    在这里插入图片描述

Flex的项目属性

  • order
    属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
    在这里插入图片描述
  • flex-grow
    属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
    如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
    如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
    在这里插入图片描述
  • flex-shrink
    -属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
    如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
    负值对该属性无效。
    在这里插入图片描述
  • flex-basis
    flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    在这里插入图片描述
    可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
  • flex
    flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

  • align-self
    align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

在这里插入图片描述

实战

<template>
	<view class="body">
		
		<view class="header">
			header
		</view>
		<view class="card_All">
			<scroll-view scroll-y="true" class="list">
				<view class="content">
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
					<view class="card_list">
						<view>
							<image src="@/static/logo.png" mode="widthFix"></image>
						</view>
						<view>
							uniapp布局
						</view>
						<view>
							免费
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="footer">
			<view class="footer_item">
				<image src="@/static/logo.png" mode="widthFix"></image>
				<view>
					首页
				</view>
			</view>
			<view  class="footer_item">
				<image src="@/static/logo.png" mode="widthFix"></image>
				<view>
					分类
				</view>
			</view>
			<view  class="footer_item">
				<image src="@/static/logo.png" mode="widthFix"></image>
				<view>
					课表
				</view>
			</view>
			<view  class="footer_item">
				<image src="@/static/logo.png" mode="widthFix"></image>
				<view>
					我的
				</view>
			</view>
		</view>
	</view>
</template>

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

<style>
.body {
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.header {
	text-align: center;
	margin-top: 10px;
}
.card_All {
	/* height: 500px; */
	flex-grow: 0.92;
	position: relative;
}
.list {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-left: 2vw;
	margin-right: 2vw;
}
.card_list {
	width: 47vw;
	margin-top: 10px;
	margin-bootom: 10px;
}
.card_list image{
	width: 100%;
	border-radius: 5px;
}
.footer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.footer_item {
	width: 45px;
	text-align: center;
	font-size: 14px;
	padding: 20px;
}
.footer image {
	width: 39px;
}
</style>

在这里插入图片描述

程楠楠&M
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 Flex布局详解
09-01
弹性因子（flex-grow, flex-shrink, flex-basis）在微信小程序的Flex布局中，每个伸缩项目都可以通过flex属性来指定其弹性因子，它是一个简写属性，可以设置三个值：flex-grow, flex-shrink, 和 flex-basis。...
微信小程序-FlexLayout布局源码
10-25
综上所述，这个资源包提供了关于微信小程序中FlexLayout布局的全面学习资料，包括源码示例、图文教程和动态演示，适合对微信小程序开发有一定基础，并希望深入理解Flex布局的开发者。通过学习，你可以更好地掌握微信...
【愚公系列】2023年02月 微信小程序-Flex布局详解
热门推荐
时光隧道
04-06 2万+
Flex布局在小程序应用还是很广的也可以用于网页。小程序也有很多UI框架可以使用这样Flex布局不需要自己写。
小程序Flex弹性布局详解
刘建亚的专栏
03-25 665
弹性布局 前言 在传统的布局方案中，我们主要是用display、float、position等属性，它们已经帮助我们解决了很多布局问题。 flex布局方案于2009年被W3C提出，短短几行代码，就能实现各种页面布局效果。在caniuse中查询，可以看到目前所有现代浏览器都能完美支持该属性。 概念 Flex 是 Flexible Box 的缩写，意为"弹性布局"，主要思想是给予容器控制内部...
【小程序】微信小程序的flex布局详解
bsy1111的博客
07-22 1103
该属性常用可选项为row和column。row：表示元素横向排列。column：表示元素纵向排列。除了上述两个可选项外，还有row-reverse和column-reverse，它们会对元素的顺序进行反转。
小程序——flex布局总结
ansheng02的博客
06-22 354
本来题目写的是flex布局详解，突然觉得很不合适，还是我的个人总结吧。 关于小程序对flex布局的友好支持，我是不用多说了，本篇文章主要讲我个人在开发过程中，对flex的总结，已整理成了思维导图。 关于flex的布局实现是在我的项目里，暂时先不放出来，大概再有一个星期左右，这个项目完成后，我再来具体的写项目实现总结，并会放出自己的源码及小程序二维码。 下一篇是关于组件开发的总结，预计是今天下...
【小程序】&【web前端】必备-Flex布局详解（弹性盒子）
苏凉.py的博客
06-18 954
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 行内元素也可以设置 flex的基本概念 如下图所示，采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。比如box它的所有子元素自动成为容器成员，称为Flex项目（flex item）比如box1，box2和box3，简称”项目”。 示例： 未设置flex布局时，呈竖直排列。 设置flex布局后，默认沿主轴方向排列。 flex容器有6个属性
flex布局详解（带你玩转flex布局）
北海有凤的博客
01-12 4763
许多人都对flex布局感到头疼，在主轴交叉轴上变来变去，每次使用的时候记不住，只能一个个去试试，看看能够出现什么效果，试出来符合自己的要求了，那就万事大吉，跳过下一个，之后再用的时候又去试一遍，这样效率就十分的低下了。 一、什么是主轴和交叉轴？ 这个概念是必须理解的，能否畅快的玩转flex布局，重点就是这两个轴了，理解这个万事大吉。主轴和交叉轴在默认情况下，可以看做是一个第四象限的坐标轴，在...
Flex布局详解-小程序
kouryoushine的博客
05-30 673
一、背景 学习小程序的时候，开始正式接触flex布局。但这种布局方式是一种较为普遍适用的方案。尤其对于前端布局来说，是不能跳过的一课。今天就研究一下flex 布局的基础概念，场景和语法。要做到可以在代码之前就可以预想结果才能在实战中应用。 二、 flex概念-可伸缩盒子 Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。 在HTML5中div标签...
Flex 布局详解（附思维导图）
萌宅鹿的技术小屋
07-01 957
Flex 布局简介 详细的知识点：【重识 HTML + CSS】知识点目录 简介 flex 布局（Flexible 布局，弹性布局）是在小程序开发中经常使用的布局 官方文档： https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-align-3/ 开启了 flex 布局的元素叫 flex container flex container 里面的直接子元素叫做 flex items 设置 display 属性为 flex 或
Flex布局简介及微信小程序视图层View详解
空空bye.
02-17 2166
1) Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。2) 任何一个容器都可以指定为Flex布局。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。
微信小程序-FlexLayout布局源码示例
05-07
2. 示例代码中，开发者可以查看如何在微信小程序的`.wxml`和`.wxss`文件中应用Flex布局。 3. 源码示例可能包含了不同场景下的Flex布局实践，如导航栏、列表、卡片等组件的设计。 五、源码分析 1. `FlexLayout▓╝╛...
详解微信小程序之scroll-view的flex布局问题
10-17
主要介绍了详解微信小程序之scroll-view的flex布局问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
小程序内容管理系统设计
svygh123的专栏
07-10 964
设计过程中，始终以用户需求为中心，注重用户体验，同时兼顾系统的安全性、可扩展性和易维护性。
小程序自学教程
最新发布
程序员好冰的博客
07-13 1105
如何安装？去CSDN搜索“xxx安装教程”即可。
Java毕业设计 基于SSM vue图书管理系统小程序 微信小程序
yinjl123的博客
07-10 689
管理员 登录 个人中心 修改密码 个人信息 用户管理 图书分类管理 图书信息管理 我的待还管理 图书归还管理 催还提醒管理 轮播图管理 系统公告管理 意见反馈管理 关于我们管理角色：用户 管理员大家可。
【计算机毕业设计】021基于weixin小程序微信点餐
卓怡工作室的博客
07-06 1276
随着社会的发展，社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景，运用软件工程原理和开发方法，它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个开发过程首先对微信点餐小程序进行需求分析，得出微信点餐小程序主要功能。接着对微信点餐小程序进行总体设计和详细设计。总体设计主要包括小程序功能设计、小程序总体结构设计、小程序数据结构设计和小程序安全设计等；详细设计主要包括微信点餐小程序数据库访问的实现，主要功能模块的具体
线下线上游戏电竞陪伴APP小程序H5同城线下约玩APP开发，语聊约玩平台搭建游戏陪玩APP源码
2301_78169161的博客
07-10 420
7、提供温服务:线下陪玩约玩APP可以为用户提供更多的温馨服务，包括生活指导、陪伴用餐、约会等，提高用户的生活质量和体验,这些是线下陪玩约玩APP在生活中的应用场景，通过提供社交、陪伴、分享和指导等服务，满足用户的各种需求，让生活更加丰富多彩。线下陪玩约玩APP可以连接用户与专业的陪玩者，提供高质量的指导和辅导，助力用户提升技能。线下陪玩约玩APP可以帮助用户找到旅行陪伴，一起探索新的地方，提升旅行的趣味性。匹配陪玩对象:根据用户的需求和偏好，程序可以匹配合适的陪玩对象，确保用户可以与合适的人进行约玩2。
微信小程序开发-计算器-知识点讲解.pptx
11-28
微信小程序开发

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值