学习完flex的布局模式之后,我们趁热打铁,来实现一个boxlayout布局.什么是boxlayout布局?那我们先上一个图看看
boxlayout布局写过后端ui代码的编程者应该不陌生了,写前端的代码的也同样很熟悉,包括html的框架frame.但以往的css中使用float浮动来进行控制,控制起来相对来说是复杂一些,也需要加入更多的标签和代码.
看完这个界面,我们就可以着手写出标签的代码布局:
那我们开始用css来实现borderlayout,这里同样定义父级parent为flex容器,方向为从左至右,可以换行.
接着设置flex项的布局模式,header,footer我们将其设置为flex-basis:100%;因为他们占据整行,而两个aside的宽度相等,center比两边的aside要宽,所以我们用flex-grow来设置他们的占据比例.
解析四大flex4布局方式
本文向大家介绍一下四个flex4布局类的用法，它们分别是：basiclayout、horizontallayout、tilelayout、verticallayout。
在学习flex4的过程中，你会遇到flex4布局的概念， 这里和大家分享一下，在flexsdk4(gumbo)的spark组件库里面增加了一个page：spark.layouts。其中包括了比较重要的四个flex4布局类（class），请看下文详细介绍。
四种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属性了。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
我要评论
网友评论