`
flying188
  • 浏览: 16775 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex4布局方式

 
阅读更多

四种Flex4布局类概述

在FlexSDK4(Gumbo)的spark组件库里面增加了一个page:spark.layouts。其中包括了比较重要的四个Flex4布 局类(class),分别是:BasicLayout、HorizontalLayout、TileLayout、VerticalLayout。

1、BasicLayoutFlex4布局:

(默认属性,当不指定定位后,则是绝对定位布局)

这是spark组件默认FlexSDK3的布局方式,即绝对定位布局。在FlexSDK3里面对应的是:layout="absolute"

2、HorizontalLayoutFlex4布局:

这是spark组件库里面的水平布局方式。在里面对应的是:layout="horizontal"

3、VerticalLayoutFlex4布局:

这是spark组件库里面的竖直布局方式。在FlexSDK3里面对应的是:layout="vertical"

4、TileLayoutFlex4布局:

这是spark组件库新增的布局方式,即格子布局方式。TileLayout布局方式可以说是HorizontalLayout和VerticalLayout结合的方式。

还有一点是需要注意的:

paddingLeft、paddingRight、paddingTop、paddingBottom
这四个属性已经转移到了HorizontalLayout、VerticalLayout里面。这点也与FlexSDK3有些区别。也就是说,在 spark组件中的容器,已经不具备paddingLeft、paddingRight、paddingTop、paddingBottom属性了。

分享到:
评论

相关推荐

    小程序源码 FlexLayout布局 (代码+截图)

    小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...

    微信小程序 FlexLayout布局 (源码)

    微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...

    CSS的flex布局.ppt

    网页布局(layout)是CSS的一个重点应用。... 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

    基本布局_flex基本布局模板_flex_

    可以实现flex布局的基本功能,flex的基本布局模板

    flex 页面布局教程

    flex 页面布局教程 详细介绍了页面的各个组件

    微信小程序的FlexLayout布局实例.rar

    本源代码将研究学习微信小程序的FlexLayout布局实例,微信小程序界面设计实例,是一种流布局的实现例子,而不是大家熟悉的盒子式布局,据说即使需要深层的嵌套,FlexLayout布局的响应速度也不会超过1ms,可谓是非常...

    flex 弹性布局,最后一行数量不足一行 列表项目左对齐的解决办法

    flex 弹性布局,最后一行数量不足一行 列表项目左对齐的解决办法,经过实际测试,亲自有效,一行的数量可以随意设置。非常有用!

    Flex 布局教程

    Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程

    Flex布局让子项保持自身高度的实现

    在用了Flex布局会发现,当水平排列后,会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认: 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽,并把所有子项的高度变为最高子项的...

    微信小程序 - FlexLayout布局源码.zip

    微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip ...

    flex弹性布局的理解。

    1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...

    微信小程序源码 FlexLayout布局(学习版)

    微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 ...

    微信小程序——FlexLayout布局(截图+源码).zip

    微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——...

    flex布局布局篇

    高清非扫描版本,特别适合放在kindle中看,非常好适合初始上手快

    Flex超炫布局 和win7的效果一样

    Flex超炫布局 和win7的效果一样 Flex超炫布局 和win7的效果一样 Flex超炫布局 和win7的效果一样 导入IDE后可以直接运行

    display: flex弹性布局

    display: flex弹性布局

    微信小程序+Flex布局示例源代码

    微信小程序,Flex布局示例源代码,包括横向布局,纵向布局,基本涵盖了Flex布局的知识点,有相关的页面布局需求,可以直接拿来使用。

    flex布局.html

    flex布局.html

    flex布局实战搭建网页页面

    html+css,使用flex布局搭建页面,纯前端,初学党可借鉴学习如何使用flex布局页面

    Flex布局.xmind

    Flex布局.xmind

Global site tag (gtag.js) - Google Analytics