好记性不如烂笔头。
flex的布局。
1、绝对布局。
2、约束布局(这个有点像css的相对定位)
约束布局有两种方式 a)相对于父容器 b)相对于“兄弟容器”
相对于父容器:父容器的layout的值必须是absolute。
可以使用下面的工具来完成,距离父容器四周以及中间的位置:
<mx:ApplicationControlBar width="100%" height="90" dock="true" fillAlphas="[1.0, 1.0]" fillColors="[#732727, #DEC9C9]">
<mx:Canvas width="100%" height="100%">
<mx:Label x="0" y="0" text="Flex"/>
<mx:Label x="0" y="41" text="GROCRE"/>
<mx:Button label="view cart" id="btnViewCart" right="10"/>
<mx:Button label="checkout" id="btnCheckout" right="100"/>
<mx:Label text="(c)2006 FlexGrocre" right="10" bottom="10"/>
</mx:Canvas>
</mx:ApplicationControlBar>
相对于“兄弟容器”:这个要复杂一点,需要建立约束列和行。如下:
<mx:constraintColumns>
<mx:ConstraintColumn id="col1" width="33%"/>
<mx:ConstraintColumn id="col2" width="33%"/>
<mx:ConstraintColumn id="col3" width="33%"/>
</mx:constraintColumns>
<mx:constraintRows>
<mx:ConstraintRow id="row1" height="50%"/>
<mx:ConstraintRow id="row2" height="50%"/>
</mx:constraintRows>
把打页面分成若干个块,左右相对于colum来布局,上下根据row来布局。
<mx:TextArea id="ta1" text="text area 1"
fontSize="20" backgroundColor="#E4E61C" left="col1:5" right="col1:10" top="row1:10" bottom="row1:20"/>
<mx:TextArea id="ta2" text="text area 2" fontSize="20"
left="col1:5" right="col2:5" top="row2:10" bottom="row2:20" backgroundColor="#F62E1F"/>
<mx:TextArea id="ta3" text="text area 3" fontSize="20"
left="col3:5" right="col3:5" top="row1:10" bottom="row2:20" backgroundColor="#3BF2F9"/>
<mx:TextArea id="ta4" text="text area 4" fontSize="20"
left="col2:5" right="col2:5" top="row1:10" bottom="row1:20" backgroundColor="#E01CE7"/>
3、水平布局或者竖直布局
这两者一般都是一起使用的。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
fontSize="12">
<mx:ApplicationControlBar width="100%" height="50" dock="true">
<mx:LinkButton label="按钮1" click="this.currentState=''"/>
<mx:LinkButton label="按钮2" click="this.currentState='fullSales'"/>
<mx:LinkButton label="按钮3" click="this.currentState='fullType'"/>
<mx:LinkButton label="按钮4" click="this.currentState='fullComp'"/>
</mx:ApplicationControlBar>
<mx:Panel width="100%" height="100%" title="面板" id="sales">
<mx:ControlBar>
</mx:ControlBar>
</mx:Panel>
<mx:VBox width="100%" height="100%" id="rightChart">
<mx:Panel title="v面板1" width="100%" height="100%" id="type">
</mx:Panel>
<mx:Panel title="v面板2" width="100%" height="100%" id="comp">
</mx:Panel>
</mx:VBox>
这些都是flex3权威上面的练习题,我一个个敲出来的。
- 大小: 7.3 KB
- 大小: 13.3 KB
- 大小: 39.8 KB
- 大小: 33.7 KB
分享到:
相关推荐
在用了Flex布局会发现,当水平排列后,会发现所有子项的高度都变成一样的了。 这是因为Flex 布局会默认: 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽,并把所有子项的高度变为最高子项的...
网页布局(layout)是CSS的一个重点应用。... 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
携程网站 移动端 Flex布局,新人可以利用此资源来学习flex布局的应用 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
flex布局实现顶部导航,底部导航固定,内容区内容高度超过可展示区域时出现滚动条,内容高度不足时铺满屏幕。
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
Flex布局之关于组件的大小 Flex布局之关于组件的大小
微信小程序,Flex布局示例源代码,包括横向布局,纵向布局,基本涵盖了Flex布局的知识点,有相关的页面布局需求,可以直接拿来使用。
flex布局培训PPT,适用于H5,小程序,ReactNative,Flutter的布局教程。
html+css,使用flex布局搭建页面,纯前端,初学党可借鉴学习如何使用flex布局页面
微信小程序flex布局demo
flex布局 justify-content 解决最后一排数量不够自动向两端排列问题,简单,高效,好用。
Flex布局学习资料,2018年整理的不错的Flex布局学习教程
flex布局.html
Flex布局.xmind
移动web开发实例flex布局案例源码
参照阮一峰flex布局,以及实例DOM,做了部分修改,可以选择属性值看效果,方便理解
关于Flex布局的笔记整理,能够详细理解Flex布局原理和用法,仅供自己学习。
利用flex布局完成了对携程网首页的制作,主要是flex为主,其他为辅的一个源代码分享给大家,希望可以对大家有帮助
高清非扫描版本,特别适合放在kindle中看,非常好适合初始上手快
微信小程序开发中flex布局容器及元素之属性技术释疑.pdf