博客> 微信小程序之flex布局跟我学20170515
微信小程序之flex布局跟我学20170515
2018-12-12 18:22 评论:0 阅读:518 李韬曦
布局 CSS 小程序

小程序

      你准备好了吗?你们的产品准备好了吗?       虽然说机会都是留给有准备的人,面对技术日新跑不过市场需求,俗语说:"攻欲善其事,必先利其器"是真理。 稍后,有时间我们再来谈,如何用工具高效管理你的时间与开发进度。

      友摩尔的微信订阅上显示了小程序如此受重视,原因一方面微信庞大用户群和它的社交开放性;另一方面小程序是区别于你用惯的公众号和订阅号的新东东,就像百度贴吧永远不好用是一个道理(社区里没百度的熟人哈~~~)。

它不再运行于微信内webview的h5页面,而是作为app运行于手机端os,通信方面采用json的键值对儿的方便交互模式。

      这不仅是简单提升了用户体验,更大的有趣性在于小程序开放了本地接口(与其说是本地接口,不如说是微信迭代微信的功能,扩大其影响力),如socket、位置、设备、罗盘、本地存储、多媒体。

有了这些可以完成绝大多数app功能了吗? 笔者茶儿认为,未必。

        

然而,你开始懵了,why??

1.小程序框架

框架基于WXML、WXSS; 逻辑层基于JavaScript;

*问题1.wxml是什么?微信说是:WeiXin Markup Language  (会写标签语言的同学不会懵,此处应听到掌声~)简单说,限定节点的XML结合一套数据绑定。

*问题2.wxss是什么?微信说是:WeiXin Style Sheets    简单说,就是CSS,限制了一些不能用的样式属性,对布局排版有益。

2.JavaScript

       如果你可以架驭js,小程序就又给你添了ES6的最新语法。幸亏你不在话下,比如你略懂nodejs,javascript不算精通,逻辑层基本没问题。

3.布局

     这是难点,但不是重点。在社区里多练两行,多和人切磋一下基本半天就过了。

      看到view层的布局使用各种flex,让人眼前一亮的事物,大多是简洁的产物。下面讲这个:

      flex布局于09年w3c提出,目的是简单快捷、响应式的实现各种页面布局,目前已得到所有浏览器的支持,也就是说在html+css中也可以很方便的使用这套布局模型。 flex(flexible box)是指“弹性布局”,任何容器都可以指定为flex布局。采用flex布局的元素称为flex container,所有子元素称为flex item。

container默认有两轴:

水平的主轴main axis 起始位置main start 结束位置main end 垂直的交叉轴cross axis。 起始位置cross start 结束位置cross end item默认沿着主轴排列,单个项目占据的主轴空间叫main size,占据的交叉轴空间叫做cross size

(附件图1) (附件图2)

container的属性:

flex-direction: 主轴的方向(内容的排列方向);值有如下: row:主轴为水平方向,起点在左端; row-reverse:主轴为水平,起点在右端; column:主轴为垂直方向,起点在上; column-reverse:主轴为垂直方向,起点在下; (附件图3)

flex-wrap:如果内容排列不下,如何换行?值如下: nowrap:不换行 wrap:换行 wrap-reverse:换行且第一行在下方

flex-flow :flex-direction和flex-wrap的综合写法,默认row nowrap 如下: flex-direction || flex-wrap eg:flex-flow:row wrap

justify-content:项目在主轴上的对齐方式 如下: flex-start:默认,主轴起点对齐 flex-end:主轴终点对齐 center:主轴中点对齐 space-between:主轴两端对齐,各个项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。

align-items:项目在交叉轴的对齐方式 flex-start:交叉轴起点对齐 flex-end:交叉轴终点对齐 center:交叉轴中点对齐 baseline:项目的第一行文字基线对齐 stretch:默认值,如果项目未设置高度或者高度为auto,将占满整个容器的高度


flex item属性:

order:定义排列顺序。数值越小排列越前,默认0 .flex-item{     order:任何int值 }

flex-grow:定义放大比例,默认为0,即如果存在剩余空间也不放大; 如果所有item的flex-grow都为1,则它们将等分剩余空间;如果有某个项目flex-grow为2,其它项目为1,则它占据的剩余空间是其它单个项目的2倍。

flex-shrink:定义缩小比例,默认为1;即如果空间不足,项目将缩小。 .flex-item{     flex-shrink:任何num值 }

flex-basis:定义在分配多余空间之前,项目占据主轴的空间。默认为auto即item的的本来大小。 (主轴空间减去各个项目的main size后,justify-content为space-between或space-around会根据flex-grow的值进行分配)

flex:flex是flex-grow、flex-shrink、flex-basis的简写,默认0 1 auto。 .flex-item{     flex:none } flex有两个快捷值auto(1 1 auto)和 none(0 0 auto) align-self:设置单个item同其他项目的不一样的对齐方式。会覆盖container的align-items属性,默认为auto,表示继承父元素的align-items值 auto:继承align-items flex-start:交叉轴的起点对齐 flex-end:交叉轴的终点对齐 center:交叉轴的中点对齐 baseline:项目的第一行文字的基线对齐 stretch:如果项目未设置高度或设为auto,将占满整个容器的高度

以上就是所有,真实布局shashou锏,作为技术世界的你值得拥有... ...

Flex布局的优点:

比传统的基于display、position、float布局更方便简洁; flex布局可以自适应在各个屏幕分辨率下的布局; 最最重要的一点,既可以应用于web也可以应用于小程序。

本文参考资料: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 摩尔的微信

收藏
0
sina weixin mail 回到顶部