用户
 ?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序之Flex容器详解

Rolan 2019-10-15 00:21

Flex 是 W3C 提出的一种新的布局方案,可以非常方便的完成响应式页面布局,到目前为止几乎所有浏览器都支持,Flex 是 Flexible Box 的缩写,翻译过来是"弹性布局"的意思,下面一起来学习 Flex 布局的使用。 基础概 ...

Flex 是 W3C 提出的一种新的布局方案,可以非常方便的完成响应式页面布局,到目前为止几乎所有浏览器都支持,Flex 是 Flexible Box 的缩写,翻译过来是"弹性布局"的意思,下面一起来学习 Flex 布局的使用。

  1. 基础概念
  2. flex容器属性
  3. flex项目属性
  4. 总结

基础概念

采用 Flex 布局的元素称为 Flex 容器,所有子元素将自动成为容器成员,也可以称之为 Flex 项目,也就是该 Flex 布局的子 View ,下面是 Flex 布局默认设置下的示意图:

如上图所示,默认的 Flex 容器的存在两个轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),主轴和交叉轴的方向不是绝对的,而是会因为设置的不同而不同,下面是与主轴和交叉轴相关的几个位置:

  • 主轴起始点(main start):主轴的开始位置
  • 主轴的结束点(main end):主轴的结束位置
  • 主轴空间(main size):单个 Flex 项目占据的主轴空间
  • 交叉轴的起始点(cross start):交叉轴的起始点
  • 交叉轴的结束点(cross end):交叉轴的结束点
  • 交叉轴空间(cross size):单个 Flex 项目占据的交叉轴空间

flex容器属性

  1. flex-direction:设置主轴的方向,可设置的值如下:
  • row:默认值,设置主轴为水平方方向,起点在左边
  • row-revarse:设置主轴为水平方向,起点在右边
  • column:设置主轴为垂直方向,起点在上边
  • column-revarse:设置主轴为垂直方向,起点在下边



flex-wrap:设置如?#20301;?#34892;,可设置的值如下:

  • nowrap:默认值,不换行
  • wap:自动换行
  • wrap-revarse:自动换行,在第一行的上一行
nowrap wap wrap-revarse
nowrap
wrap
wrap-revarse
  1. flex-flow:flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。

  2. justify-content:设置项目在主轴上的?#20113;?#26041;式,可设置的值如下:

  • flex-start:默认值,左?#20113;?/li>
  • flex-end:右?#20113;?/li>
  • center:居中?#20113;?/li>
  • space-between:两端?#20113;?/li>
  • space-around?#22909;?#20010;项目两侧的间隔相等,与屏幕边缘的间隔是其他项目之间间隔的一半
  • space-evenly:平均分布各个项目,与屏幕边缘的间隔与其他项目之间的间隔相等
flex-start flex-end center space-between space-around space-evenly
flex-start
flex-end
center
space-between
space-around
space-evently
  1. align-items:设置项目在交叉轴上如何?#20113;耄?#21487;设置的值如下::默认值,如果没有项目未指定高度或设置为auto,则项目会占满整个容器的高度,可设置的值如下:
  • stretch:默认值,如果没有项目未指定高度或设置为auto,则项目会占满整个容器的高度,下面图?#23616;?#39033;目 1 就未指定高度,其余项目都指定了高度 就未指定高度
  • flex-start:设置与交叉轴的起点?#20113;?/li>
  • flex-end:设置与交叉轴的结束点?#20113;?/li>
  • center:设置与交叉轴的重点?#20113;?/li>
  • baseline:设置项目与项目中第一行文字基线?#20113;?/li>
stretch flex-start flex-end center baseline
stretch
flex-start
flex-end
center
baseline
  1. align-content:设置多根轴线的?#20113;?#26041;式,如果只有一个轴则该属性不生效,可设置的属性如下:
  • stretch:默认值,轴线占满整个交叉轴
  • flex-start:设置与与交叉轴的起点?#20113;?/li>
  • flex-end:设置与交叉轴的终点?#20113;?/li>
  • center:设置与交叉轴的中点?#20113;?/li>
  • space-between:设置与交叉轴两端?#20113;耄?#36724;线之间的间隔平均分布
  • space-around:设置每根轴线两侧的间隔都相等,轴线与轴线的间隔是轴线到交叉轴边?#23548;?#38548;的两倍
stretch

flex项目属性

  1. order:默认值为0,设置项目的排列顺序,数值越小,排?#24615;?#38752;前,如下图所示:

order

  1. flex-grow:设置项目的放大比例,默认值为0,如果存在剩余空间也不放大,如下图所示:
flow-grow=0 flow-grow=1 flow-grow设置不同值
flow-grow
flow-grow
flow-grow
  1. flex-shrink:设置项目的缩小比例,默认值为 1,如果项目空间不足,则项目将缩小,如下图所示:
flow-shrink=1 flow-shrink=0 flow-shrink设置不同值
flex-shink
flex-shink
flex-shink

上面图?#23616;校?#24403; flex-shrink 全设置为 0,每个项目不会缩放,所以第四个方块被挤出去了,而相应的设置 flex-shrink 为 1,则可以在空间不足是进行一定程度的缩放。

  1. flex-basis:项目所占的主轴空间,如下图所示:

flex-basis

  1. align-self:定义元素自身的?#20113;?#26041;式,该属性与 align-items 属性差不多,具体就不一一介绍了,直接上效果图如下:
auto stretch flex-start flex-end center baseline
auto
stretch
flex-start
flex-end
center
baseline

上面的效果中设置 auto 会跟随 flex 容器中 align-items 的设置。

  1. flex:flex 是 flex-grow, flex-shrink 和 flex-basis 的简写,默认值为0 1 auto,这里就不在贴效果图了。

总结

最近尝试了一下微信小程序,感觉开发起来?#35759;?#20063;不是很大,觉得本篇文章的内容也是微信小程序中最重要的内容了,本来打算继续进行小程序系列的学习,但是看了一下后面的内容无非就是小程序各个组件的使用了,如果有其他项目的开发经验,实在没必要一个组件一个组件去验证学习,所以小程序的学习就到此为止,最后,说一点微信小程序最重要的我觉?#27809;?#26159; Flex 布局。可以选择关注个人微信公众号:jzman-blog 获取最新更新,一起交流学习!


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: jzman 来自: 掘金
不朽的浪漫援彩金
双色球福彩计算公式 手机棋牌发牌有规律么 足彩最佳投注方案 新疆11选5前三开奖号 组六5码复试 11选5机选号码 大奖 股票融资协议书 七星彩和值走势图200期 全民奇迹赚钱技巧集锦 湖南省幸运赛车开奖结果 听歌可以赚钱 青海11选5基夲走势图 9号彩票平台注册 手机棋牌打鱼套路 手游试玩赚钱哪个靠谱