专栏首页叉叉敌微信小程序-view元素Flex布局

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

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

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

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linux常用命令10 - unzip

    zip 是最广泛使用的归档文件, 除了linux,windows也是非常的广泛。,支持无损数据压缩。 zip 文件是包含一个或多个压缩文件或目录的数据容器。

    叉叉敌
  • Linux常用命令02 - mv

    mv 命令(简称 move)用于将文件和目录从一个位置重命名并移动到另一个位置。 命令的语法如下:

    叉叉敌
  • Linux 定时任务 crontab

    crontab 是一个守护进程,在指定的时间运行。每个用户都有独立的crontab,因此不需要用su来执行。

    叉叉敌
  • 10分钟理解CSS3 FlexBox

    设置父元素的display属性为flex,则子元素都变成flex item,由此可以控制子元素的排列方式、尺寸、间距等;

    MudOnTire
  • 弹性(Flex)布局的使用

    最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少。

    嘉为科技
  • 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有...

    pingan8787
  • CSS:10分钟搞定Flex布局

    Flexbox Layout(弹性盒子布局),是CSS3的一种新型布局模式,给很多CSS老大难问题提供了优雅的解决方案(例如:垂直居中

    WEBJ2EE
  • 深入 CSS 中的弹性盒子 Flexible Box

    弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。

    IT技术小咖
  • flexbox 布局

    即使不知道视窗大小或者未知元素情况之下都可以智能的、灵活的调整和分配元素和空间两者之间的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。

    双面人
  • CSS6:flex布局

    display inline-block主要用来做横向的布局。 用分离负maigin用来产生位移。

    代码之风

扫码关注云+社区

领取腾讯云代金券