小程序：display flex

分类：微信小程序作者：梦之归途

display flex是将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

在web网页中必须要考虑兼容性，因为浏览器不同，浏览器的支持和实现方式也不同，导致兼容起来略显麻烦

不过，我们这里是开发微信小程序的话，并不需要考虑其他浏览器。

 

微信小程序页面布局方式采用的是Flex布局。

Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。

Flex布局提供了元素在容器中的对齐，方向以及顺序，甚至他们可以是动态的或者不确定的大小的。

Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。

flex布局

Flex布局的特点:

  • 任意方向的伸缩，向左，向右，向下，向上

  • 在样式层可以调换和重排顺序

  • 主轴和侧轴方便配置

  • 子元素的空间拉伸和填充

  • 沿着容器对齐

微信小程序实现了Flex布局,简单介绍下Flex布局在微信小程序中的使用。

伸缩容器

设有display:flex或者display:block的元素就是一个flex container(伸缩容器)，里面的子元素称为flex item(伸缩项目)，flex container中子元素都是使用Flex布局排版。

  • display:block 指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:block。
  • display:flex:指定为行内容器模式，在一行内显示子元素，可以使用flex-wrap属性指定其是否换行，flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)

使用display:block(默认值)的代码:

<view class="flex-row" style="display: block;">

<view class="flex-view-item">1</view>

<view class="flex-view-item">2</view>

<view class="flex-view-item">3</view>

</view>

显示效果:

block

改换成display:flex的显示效果:

flex

可以从效果图看到block和flex的区别，子元素view是在换行显示(block)还是行内显示(flex)。

主轴和侧轴

Flex布局的伸缩容器可以使用任何方向进行布局。

容器默认有两个轴：主轴(main axis)和侧轴(cross axis)。

主轴的开始位置为主轴起点(main start)，主轴的结束位置为主轴终点(main end),而主轴的长度为主轴长度(main size)。

同理侧轴的起点为侧轴起点(cross start),结束位置为侧轴终点(cross end),长度为侧轴长度(cross size)。详情见下图:

Flex-direction

注意，主轴并不是一定是从左到右的，同理侧轴也不一定是从上到下，主轴的方向使用flex-direction属性控制,它有4个可选值:

 

  • row :从左到右的水平方向为主轴
  • row-reverse：从右到左的水平方向为主轴
  • column:从上到下的垂直方向为主轴
  • column-reverse从下到上的垂直方向为主轴

如果水平方向为主轴，那个垂直方向就是侧轴，反之亦然。

四种主轴方向设置的效果图:

示例图

图中的实例展示了使用了不同的flex-direction值排列方向的区别。

实例代码:

<view >

<view class="flex-row" style="display: flex;flex-direction: row;">

<view class="flex-view-item">1</view>

<view class="flex-view-item">2</view>

<view class="flex-view-item">3</view>

</view>

<view class="flex-column" style="display:flex;flex-direction: column;" >

<view class="flex-view-item">c1</view>

<view class="flex-view-item">c2</view>

<view class="flex-view-item">c3</view>

</view>

</view>

运行效果：

flex-direction

对齐方式

子元素有两种对齐方式：

 

justify-conent 定义子元素在主轴上面的对齐方式

align-items 定义子元素在侧轴上对齐的方式

justify-content有5个可选的对齐方式:

  • flex-start 主轴起点对齐(默认值)
  • flex-end 主轴结束点对齐
  • center 在主轴中居中对齐
  • space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
  • space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。

justify-content的对齐方式和主轴的方向有关，下图以flex-direction为row，主轴方式是从左到右,描述jstify-content5个值的显示效果:

justify-content

align-items表示侧轴上的对齐方式:

  • stretch 填充整个容器(默认值)
  • flex-start 侧轴的起点对齐
  • flex-end 侧轴的终点对齐
  • center 在侧轴中居中对齐
  • baseline 以子元素的第一行文字对齐

align-tiems设置的对齐方式，和侧轴的方向有关，下图以flex-direction为row,侧轴方向是从上到下,描述align-items的5个值显示效果:

aign-items

有了主轴和侧轴的方向再加上设置他们的对齐方式，就可以实现大部分的页面布局了。

 

最后介绍一个自己花了两天做出的小程序，感兴趣的可以扫一下，欢迎提取意见

需要的源码的可以联系我，相互学习一起进步

weather

 

原文地址：https://blog.csdn.net/lwzhang1101

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

微信小程序订阅消息
概述 消息能力是小程序能力中的重要组成，我们为开发者提供了订阅消息能力，以便实现服务的闭环和更优的体验。 订阅消息推送位置：服务通知 订阅消息下发条件：用户自主订阅 订阅消息卡片跳转能力：点击查看详情可提爱转至该小程序的页面 消息类型 一次性订阅消息 一次性订阅消息用于解决用户使用小程序后，后续服务
判断H5页面环境在微信中还是小程序中
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.miniProgram.getEnv可以获取环境参数 &lt;script type=&quot;text/javascript&quot; src=&quot;https://res.wx.qq.com/open/js/jweixin-1.
wx.reLaunch和wx.navigateTo，wx.navigateTo的区别
wx.reLaunch和wx.navigateTo，wx.navigateTo的区别 2019-03-23 11:18:05 wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.n
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结 小程序里常见的取值有以下几种，一个完整的项目写下来，用到的概率几乎是100%。 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是：data-index=&quot;{{index}}&quot
H5页面判断是否是微信小程序打开
H5项目接入微信授权登录，通过 UA 区分微信还是普通浏览器： let&#160;ua&#160;=&#160;navigator.userAgent.toLowerCase(); let&#160;isWeixin&#160;=&#160;ua.indexOf(&#39;micromessenge
微信小程序获取data-xx=""属性的值，自定义属性设置和获取（data-）
微信小程序获取data-xx=&quot;&quot;属性的值，自定义属性设置和获取（data-） 微信小程序&lt;view class=&quot;details-btn&quot; data-taskId=&quot;111&quot; bindtap=&#39;taskdetails&#39
小程序报错：TypeError: Cannot read property ‘addEventListener‘ of undefined
小程序报错：TypeError: Cannot read property ‘addEventListener‘ of undefined 解决办法 将调试基础库由2.16.0（或者当前的） -&gt; 2.14.1 解决问题
H5跳转微信小程序-成功案例（VUE）（踩坑无数）
H5跳转微信小程序-成功案例（VUE）（踩坑无数） TuoMei 已于 2022-07-29 09:52:22 修改 准备工作 根据官方提供的资料需准备以下几点： 1、已认证的服务号 2、绑定JS接口安全域名 （在微信公众平台设置） 3、IP白名单 （在微信公众平台设置） 4、将小程序和H5公众号进
微信小程序 页面跳转和数据传递实例详解
微信小程序 页面跳转和数据传递实例详解 这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解，需要的朋友可以参考下 微信小程序 页面跳转和数据传递 1.先导 在Android中，我们Activity和Fragment都有栈的概念在里面，微信小程序页面也
小程序运行程序
情景1.拉取公司代码演示： 因为github有墙，这里我们以gitee(码云)为例作为演示 (其实就是国产github，也非常好用~) 步骤一：打开Git界面 先在一个空文件夹右击Git Bash Here，打开git界面 步骤二：输入克隆远程仓库指令 别人复制的链接在这里获取 拿到别人赋值的链接自
如何开发微信小程序？
如何开发微信小程序？ 作为一名10多年一直从事互联网平台开发的从业者，我来回答下这个问题吧。 微信小程序开发流程总体可以归纳为4个步骤， 老张带您捋一捋整个环节，小白用户可以收藏了。 好了废话不多说，开始！ 一、开发前小程序需要准备的资料 我们在开发微信小程序前，需要准备下相关资料。这个资料主要是后
微信小程序getApp()和App()方法讲解
 
原生小程序开发优化方案
原生小程序开发优化方案 为了更好的制定优化方案，我们 有必要先了解下小程序的底层架构、以及与普通网页开发的差异 小程序最终渲染载体与当下一些热门的技术 Flutter、React Native等不同，依然是浏览器内核，而不是原生客户端。 而对于传统的网页来说，UI 渲染和 JS 脚本是在同一个线程中
优化小程序大小
1，不要下两倍尺寸的图片， 小程序本身自己就会对元素缩小两倍，设计图片的一杯就已经很清晰了。 2，图片压缩，（主要是压缩静态资源，ps 可以压缩，然后有一些在线压缩工具，保持600-800kb 的静态） 3，通用的代码组件化 4，是在工程量太大可以分包，分包现在最大支持20m（一般都不会去分包的）
能取代90%的人的工作的ChatGpt到底牛在哪？
文章浏览阅读189次。人工智能研究实验室OpenAI在2022年11月30日发布了自然语言生成模型ChatGPT，上线两个月就已经超过一亿用户，成为了人工智能界当之无愧的超级大网红。ChatGPT凭借着自身强大的拟人化及时应答能力迅速破圈，引起了各行各业的热烈讨论。简单来说ChatGPT就是可以基于用户文本输入自动生成回答的人工智能聊天机器人。那肯定会有人说这不就是Siri嘛，虽然都是交互机器人但是两者的差别可老大了。那么ChatGPT在人机交互时为什么会有这么出色的表现？它到底会不会取代搜索引擎？90%的人真的会因为ChatG
微信小程序开发知识点
文章浏览阅读193次。8. 导航和路由管理：掌握小程序的导航方式，如使用wx.navigateTo跳转页面、使用wx.redirect重定向页面等，学会实现页面之间的跳转和传参。1. 小程序的基本概念和架构：了解小程序的定义、特点以及与传统APP的区别，掌握小程序的运行环境、组件和API等基本概念。10. 支付功能：学习小程序的支付方式，如微信支付、支付宝支付等，了解支付流程和注意事项，学会实现小程序的支付功能。9. 用户授权和登录：了解小程序的用户授权机制，如获取用户信息、调用微信API等，学会实现用户的登录和注册功能。_微信小程序开发知识点总结
微信小程序斗地主完整代码及步骤
文章浏览阅读4.8k次，点赞7次，收藏18次。一、准备工作1. 安装微信开发者工具，并登录微信小程序账号；2. 准备斗地主游戏的图片资源；3. 准备斗地主游戏的音效资源；二、创建小程序1. 打开微信开发者工具，点击“新建小程序”，输入小程序名称，选择小程序的项目目录，点击“创建”；2. 在小程序的项目目录中，新建文件夹“images”，将准备好的斗地主游戏的图片资源放入“images”文件夹中；3. 在小程序的项目目录中，新建文件夹“sounds”，将准备好的斗地主游戏的音效资源放入“sounds”文件夹中；三、编写代码1. 在小程_扑克牌微信小程序代码
微信小程序狼人杀游戏代码及步骤
文章浏览阅读3.9k次，点赞3次，收藏7次。一、准备工作：1. 安装微信开发者工具，创建小程序项目；2. 准备游戏角色图片；3. 准备游戏背景音乐；二、实现步骤：1. 创建游戏页面，添加游戏角色图片，添加游戏背景音乐；2. 创建游戏角色类，定义游戏角色属性，如角色名称、角色图片、角色能力等；3. 创建游戏类，定义游戏属性，如游戏人数、游戏角色、游戏规则等；4. 创建游戏控制类，定义游戏流程，如游戏开始、游戏结束、游戏角色分配等；5. 创建游戏界面，实现游戏流程，如游戏开始、游戏结束、游戏角色分配等；6. 创建游戏结果页面，显示游戏_微信小程序游戏代码
开发微信小程序模拟聊天步骤及代码
文章浏览阅读1.7k次。1. 创建小程序项目：使用微信开发者工具创建一个小程序项目，并在项目中添加一个页面，用于模拟聊天。 2. 定义数据结构：定义一个数据结构，用于存储聊天记录，包括发送者、接收者、消息内容等信息。 3. 实现聊天功能：实现聊天功能，包括发送消息、接收消息、显示消息等功能。 4. 实现界面：使用微信小程序的界面框架，实现聊天界面，包括聊天记录列表、输入框等。代码示例：// 定义数据结构var chatData = { sender: '', receiver: '', message: '' };_制作聊天对话小程序代码
微信小程序开发商城详细步骤
文章浏览阅读2.1k次。1、创建小程序项目：使用微信开发者工具，新建一个小程序项目，输入项目名称，选择项目目录，点击“创建”按钮，即可创建小程序项目。2、添加页面：在小程序项目中，可以添加多个页面，每个页面都有自己的页面文件，比如首页、分类页、购物车页、我的页面等。3、添加组件：在小程序项目中，可以添加多个组件，比如商品列表组件、购物车组件、订单组件等，用于在页面中显示商品信息、购物车信息、订单信息等。4、添加接口：在小程序项目中，可以添加多个接口，用于获取商品信息、购物车信息、订单信息等，以便在页面中显示。5、_微信开发者工具做一个我的商城
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot