前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序-view元素Flex布局

微信小程序-view元素Flex布局

作者头像
叉叉敌
发布2019-08-23 17:53:26
8870
发布2019-08-23 17:53:26
举报
文章被收录于专栏:Chasays

对于网页布局,推荐 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。可以参考完全教材,我推荐一个阮老师的,下面是链接

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

对于 Flex 有几个属性,然后对常见的属性展开说明即可,怎么使用就完了。 对于这个布局的多动手,实在是一个非常不错的方法。

flex-direction flex-wrap flex-flow justify-content align-items align-content

  • 先声明这个是什么布局, 直接在对于的父view里面用, 下面的代码
代码语言:javascript
复制
display: flex;
  • 对于第一个flex-direction,父view里面的元素排列方式,就是flex布局(这里注意是里面的view才生效,如果作用范围不是这个,那就没有效果了),其值有三个,第一个是默认。其他看单词意思就知道了。依次是 横向,横向从右往左、垂直、垂直从下到上
代码语言:javascript
复制
row | row-reverse | column | column-reverse;
  • flex-wrap 这个意思,对于元素太多,而且指定每个view的宽度,view 宽度大于最大宽度是否换行,依次的意思不换号、换行、换行且颠倒
代码语言:javascript
复制
nowrap | wrap | wrap-reverse
  • justify-content这个是对其方式,依次是左对齐、右对齐、居中、两端对齐,项目之间的间隔都相等、每个项目两侧的间隔相等
代码语言:javascript
复制
justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items属性定义项目在交叉轴上如何对齐。

这个我还没有用过,不过看介绍蛮花哨的。nice~

代码语言:javascript
复制
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

其他的参数对于小项目来说,用的较少,说了也不一定记得住,如果有用到的话,在实战种用起来。这个才是记得最牢固的!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年08月14日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档