• 欢迎访问小辉博客,有访必回!广告为已更换为百度联盟,希望随手点下,虽然博客是兴趣所在,但也想有一个良性循环!请大家谅解!

浅谈基于AmazeUI Touch 的 Flex布局结构

前端 小辉 647次浏览 已收录 0个评论 扫描二维码

2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

Webkit内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

让我们看看AmazeUI的布局是怎么选择的:

Amaze UI Web基于 float,12 列响应式
Amaze UI Touch 基于flex,6 列流式
很多AmazeUI的程序员在使用Touch系统进行架构的时候,往往忽略了Flex的布局,很多浏览器的兼容问题就会出现了。值得注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。让我们一起了解一下Flex布局的属性的取值。
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,容器的六大属性
1、flex-direction:属性决定主轴的方向,类似于规定了整个容器是按照从左到右(float:left)还是从右到左(float:right)或者由上到下,甚至由下到上。这个就是主轴的方向。他有4个值

row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
2、flex-wrap:默认情况下,元素都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,换行的方式。

nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
3、flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
4、justify-content:属性定义了项目在主轴上的对齐方式。
5、align-items:属性定义项目在交叉轴上如何对齐

flex-start:顶边对齐。
flex-end:底边对其。
center:水平居中。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
6、align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
同时在排列上也有6个属性来对项目进行分析。
1、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
2、flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
3、flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
4、flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
5、flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
6、align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
当有了以上基础后,回过头来我们在欣赏AmazeUI Touch的布局[http://t.amazeui.org/#/docs/typography?_k=ehwub2],虽然API和jQuery版本很像,但整体布局理念完全是不一样的。所以在自定义一些属性的时候,请贯彻Flex精神。


小辉博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明浅谈基于AmazeUI Touch 的 Flex布局结构

喜欢 (0)
[cnbzzh@qq.com]
分享 (0)
小辉
关于作者:
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址