`

flex 4 布局示例一

    博客分类:
  • Flex
阅读更多

flex4(flex skd4)的布局发生了很大变化,在flex3中有vbox或hbox等,在flex4中使用 layout 中的 VerticalLayout 或 HorizontalLayout 设置,并且外部要包group。

 

代码:两个group

<s:Panel x="40" y="18" width="321" height="260">

		<s:Scroller width="100%" height="100%">

			<s:Group x="10" y="12" width="100%" height="100%" id="group1">

				<s:layout>

					<s:VerticalLayout useVirtualLayout="true"/>

				</s:layout>

				<s:TextInput/>

				<s:Button label="按钮"/>

				<s:Group width="200" height="200" x="170" y="111">

					<s:layout>

						<s:HorizontalLayout useVirtualLayout="true"/>

					</s:layout>

					<s:Button label="按钮"/>

					<mx:DateChooser width="149" height="172"/>

				</s:Group>

				

			</s:Group>

			

		</s:Scroller>

	</s:Panel>

 

效果:

 效果

分享到:
评论

相关推荐

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

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

    微信小程序-FlexLayout布局源码示例

    微信小程序-FlexLayout布局源码示例

    页面代码布局示例

    页面布局代码,页面代码布局示例页面代码布局示例页面代码布局示例页面代码布局示例

    flex-layout-demo:Flex布局教程,包含示例代码

    flex-layout-demo参考:[1] [2] [3] [4]Flex布局简介Flex英文为flexiable box,翻译为弹性盒子,Flex布局即弹性布局。Flex布局为盒子模型提供了很大的灵活性,任何一个容器都可以指定为Flex布局,设置方法为:.box{...

    flex布局实现无缝滚动的示例代码

    本文主要介绍了flex布局实现无缝滚动的示例代码,分享给大家,具体如下: 案例的演示 flex布局 所谓flex布局就是弹性盒布局,这种布局在移动端比较常用,但随着浏览器的版本更新,flex布局因为自身的优点,日渐常用...

    使用flex布局轻松实现页面布局的示例代码

    1、上中下布局: &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;meta name=viewport content=width=device-width, initial-scale=1.0&gt; &lt;title&gt;Document&lt;...

    css3 flex布局实现平均分配元素的示例代码

    本文主要介绍了css3 flex布局实现平均分配元素,给自己留个笔记,也分享给大家,具体如下: 例子一: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;flex ...

    CSSFlexbox布局助手Flex-layout-attribute.zip

    示例内容分布在一行里并在容器居中: layout="row center-center"&gt;  &lt;div&gt;1  &lt;div&gt;2  &lt;div&gt;3 &lt;/div&gt;DEMO特点专注于 HTML 属性 -- 独立的布局标记,语义化和简洁的语法不仅是栅格(网格) -- 比例之间的关联,...

    Flex布局实现div内部子元素垂直居中的示例

    任何一个容器都可以指定为Flex布局。注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。  采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为...

    vue flex 布局实现div均分自动换行的示例代码

     一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客,我们主要用到flex布局的一个换行属性,它是flex-wrap: wrap,自动换行。 二、vue代码 (1)html部分: &...

    flex-layout-example:简单的初学者弹性布局

    Flex布局示例一个简单的初学者弹性布局12列布局容器/行/列主布局只有45行SASS 响应媒体查询开始只需在浏览器中打开index.html。 进行更改安装sass npm install -g sass 2.对`flex.scss`进行更改3.在CLI中运行`sass ...

    Flash+Flex+Air移动开发入门经典 pdf

    5.4 在flex中使用布局 148 5.5 小结 167 5.5.1 练习 167 5.5.2 本章所学内容 168 第6章 调试应用程序 169 6.1 设置断点 169 6.2 全局错误处理 180 6.3 处理未捕获错误 180 6.4 try…catch语句 183 6.5 ...

    Flex基础培训-3-组件和布局

    Flex基础培训-3-组件和布局 文档和代码示例,可用来快速学习使用

    XamarinFormsLayoutChallenges, Xamarin窗体的示例布局.zip

    XamarinFormsLayoutChallenges, Xamarin窗体的示例布局 的用户界面不一定要消耗Xamarin.Forms 是构建跨平台平台应用程序的一个疯狂的生产力框架。 然而,直接跳出盒子,你可能会发现你的用户界面有点乏味。 很好地...

    flexibility:Xamarin.Forms FlexLayout示例以多种方式设置样式

    一系列布局练习,探索可通过新的受Flexbox启发的布局(恰当地称为FlexLayout)实现的布局。 此布局不会替代所有其他布局,但最适合于: 促进扁平化,从而提高性能的视图层次结构 取决于内容的间距和分布的布局 需要...

    一个页面秒开的Vue项目示例源码

    这是一个页面秒开的移动端Vue项目示例,集成了 Vant UI,flex布局,页面自适应方案,打包文件优化还有动态加载JS文件(如jQuery)等实用的封装。开箱即用! 资源详情说明:...

    web-页面常见后台布局

    web-页面后台布局,提供简单的布局代码示例,使用display:flex简洁的布局语法实现。目前,display:flex已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

    flex扩展的textinput(类似百度输入框文字匹配的效果)

    基于flex扩展的TextInput组件,可以实现输入文字后实现结果匹配,类似于百度输入框效果,默认最多匹配10条数据,可以修改源码实现自定义效果,功能比较简单,给需要的朋友吧,用法示例都在文件中,复杂的功能可以...

    Flex企业应用开发实战源代码

    本书对Flex的基础知识着墨不多,所有内容都围绕Flex+Java这一企业级应用开发技术展开,侧重于对Flex技术原理、企业级应用的架构思想和实现方法的讲解,所以书中的内容不会随着Flex版本的升级而过时。 第1章 Flex...

Global site tag (gtag.js) - Google Analytics