快应用出来也有一段时间了,相信大家在开发中也是悲喜交加，喜的是快应用开发起来很简单啊，完全使用前端技术，几乎不用花太长时间去学习，看下官方示例，看下API文档相信大家很快就会上手，悲剧的是不管是前端转过来的还是原来搞原生app转过来的，都会被快应用的布局虐的欲生欲死，因为好多以前使用的属性不支持、好多以前使用的样式不支持，大家想要凭借以前的经验来快速的生成自己想要的布局结构很费劲，这个不是不支持，那是因为大家对快应用布局换不太熟悉，今天我就为大家带来快应用布局详细入门讲解
Flexbox 弹性盒子
其实只要大家熟悉弹性盒子布局就会很快上手，首先在快应用里面，支持通用属性里面的display属性也仅仅支持 flex | none 这两个值，默认的是flex，前端的小伙伴就会很纳闷，为啥没有绝对定位了？没有这个的话界面布局起来很痛苦啊！其实还是大家弹性盒子布局理解的不太深入导致的。我今天就给大家慢慢讲解，先从简单的开始
-
flex-direction子组件排列方式，仅支持以下属性
row效果水平排列.png
column效果
垂直排列.png
-
justify-content子组件在主轴上的排列方向，效果受
flex-direction属性影响。可以取得值为：flex-start|flex-end|center|space-between，默认的置为flex-start。
- 当
justify-content值为row,
flex-start效果为
flex-start.png
flex-end效果为flex-end.png
center效果为
center.png
space-between效果为space-between.png - 当
justify-content值为column,
flex-start效果为flex-start.png
flex-end效果为
flex-end.png
center效果为center.png
space-between效果为space-between.png
-
align-items 子组件在主轴垂直方向上的排列方式，效果同样会受到
flex-direction的值的影响，取值为：stretch|flex-start|flex-end|center
- 当
justify-content值为row,
flex-start效果
flex-start.png
center效果center.png
flex-end效果flex-end.png
stretch效果stretch.png - 当
justify-content值为column,
flex-start效果flex-start.png
center效果center.png
flex-end效果flex-end.png
stretch效果stretch.png
大家看到这几个基础的属性对应的样式是不是很熟悉？对了这个和CSS里面弹性盒子布局样式是一模一样的，但是为啥大部分搞前端的同学使用起来还是很郁闷呢？那是因为它就只支持这几个属性和取值，其他的以前HTML、CSS中的经验在这里不起作用了，所以我经常说，做快应用，大家要忘记以前HTML、CSS的经验，只要记住快应用支持的就可以，毕竟这是两个东西两套体系，好了今天布局就简单的分析到这里，后面再复杂界面布局的分析。
