• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

【微信小程序】带你一次性搞定小程序的flex模型

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、先了解点基础知识:

采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

现在用一张图带你感受一下容器和项目:

容器中默认存在着两根轴:

水平的主轴(main axis)和垂直的交叉轴(cross axis)。

主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end

交叉轴的开始位置叫做cross start,结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

二、进一步理解:

我们首先弄明白了容器和项目的基本情况,那么我们就进一步探讨一下容器和项目的属性。

为了方便大家的理解,采用图示的方式进行展示,

为了便于复习,于是便画成了思维导图。

下面用图片进行展示,如果看不清的话,这里有PDF版本的https://pan.baidu.com/s/1AF5V-atvnj8mMA7fauRQ2Q

图片很直观,但是看懂了,不代表掌握了,图片后是第三部分,先耐下性子叭~

 

三、来点练习

提供Flex弹性布局练习网站:http://flexboxfroggy.com/

前辈的Flex弹性布局博文:https://blog.csdn.net/potato512/article/details/79924210

 

图片中展示了比较全面的容器和项目的属性,但是在实际做小程序项目的时候,经常用到的只是一小部分,所以要做到的是经常用到的属性及其值要记住,

至于其他的,要记住有这样子的东西,真正用到的时候,查一下就行啦。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
用vue开发微信小程序1发布时间:2022-07-18
下一篇:
如何监控微信小程序HTTP请求错误发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap