美文网首页
【小程序】Flex布局

【小程序】Flex布局

作者: 灰灰手记 | 来源:发表于2018-11-17 17:05 被阅读35次

    【小程序】笔记内容声明及汇总


    在前面的 【小程序】image组件的13种模式 中,我们使用了如下样式:

    /// wxml 布局
    <view>
        <image mode="top left" src="{{image}}" />
        <image mode="top" src="{{image}}" />
        <image mode="top right" src="{{image}}" />
    </view>
    
    /// wxss 样式
    view {
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #000;
        width: 400px;
        height: 150px;
        margin-top: 1px;
    }
    

    这里面使用了 display: flex; flex-direction: row;,那么,什么是 Flex

    Flex 布局是 W3C 组织在 2009 年提出的一个新的布局方案,其宗旨是让页面的样式布局更加简单,并且可以很好地支持响应式布局。它是小程序官方推荐的布局方式,但并它本身是 CSS 语法的一部分,而不是小程序所独有的技术。

    Flex 也称为“弹性布局”,主要作用在容器上。比如上面的 view 组件就是一个容器,我们使用 display:flex 将这个 view 变成了一个弹性盒子。

    flex-direction 属性

    设置 display:flex 是应用一切弹性布局属性的先决条件,如果不设置 display:flex,那么后续的其他相关弹性布局属性都将无效。在设置好 display:flex 自后,接着我们使用 flex-direction 这个属性指定 view 内元素的排列方向,这个属性可能的值有4个:

    • row (默认值)
    • column
    • row-reverse
    • column-reverse

    为了方便理解,书中引入了“”的概念,将 flex-direction 指定的方向定义为“主轴”,将与之垂直的方向定义为“交叉轴”。有兴趣可以自行去查阅,这里只介绍我自己的理解。

    举个栗子

    假设有一个 view,里面有3个 image,这3个 image 编码顺序是固定的。那么当我们一次将 view 的 flex-direction 的值修改为上面几种时,运行效果大致就是这样的:

    flex-direction

    这个效果和 Android 中的 LinearLayout 非常类似,只不过 LinearLayout 没有定义 reverse 的情况。对LinearLayout没有误解的童鞋,应该都看懂这个简陋的示意图,这里也就不再细说了。

    align-items 属性

    上个栗子中只介绍了排列方式,但 image 尺寸有大有小,它们是怎么对齐的呢?

    flex 布局的对齐方式由 align-items 属性控制,书中作者引入的“轴”的感念同样延伸到了这个属性,个人觉得有点绕口,因此这里也只介绍自己的理解。如对“轴”的解释感兴趣,可自行去查阅。

    现本人已知有效的属性值有如下3种:

    • flex-start (默认) top/left 对齐
    • center 居中对齐
    • flex-end bottom/right对齐

    接下来就结合实例做简要的说明。

    举个栗子

    这里我们以 flex-direction: row; 说事,其它情况类比即可。假设这3个 image 有如下的大小关系:

    默认对齐方式

    上图就是默认的对齐方式,也就是说,当排列方式是row时,默认是顶部对齐。而 center 则会让所有子组件按顺序摆放在容器中间(书中的“垂直轴”上),就是这样的:


    center

    没错,flex-end 的情况就是你理解的,这里就不再画图了。

    一句话小结:flex-direction 的值是 row、row-reverse 时,对齐方式是上中下;值是 column、column-reverse 时,对齐方式是左中右

    相关文章

      网友评论

          本文标题:【小程序】Flex布局

          本文链接:https://www.haomeiwen.com/subject/otnbfqtx.html