快应用布局其实很简单(一)

快应用出来也有一段时间了,相信大家在开发中也是悲喜交加，喜的是快应用开发起来很简单啊，完全使用前端技术，几乎不用花太长时间去学习，看下官方示例，看下API文档相信大家很快就会上手，悲剧的是不管是前端转过来的还是原来搞原生app转过来的，都会被快应用的布局虐的欲生欲死，因为好多以前使用的属性不支持、好多以前使用的样式不支持，大家想要凭借以前的经验来快速的生成自己想要的布局结构很费劲，这个不是不支持，那是因为大家对快应用布局换不太熟悉，今天我就为大家带来快应用布局详细入门讲解

---

Flexbox 弹性盒子

其实只要大家熟悉弹性盒子布局就会很快上手，首先在快应用里面，支持通用属性里面的display属性也仅仅支持 flex | none 这两个值，默认的是flex，前端的小伙伴就会很纳闷，为啥没有绝对定位了？没有这个的话界面布局起来很痛苦啊！其实还是大家弹性盒子布局理解的不太深入导致的。我今天就给大家慢慢讲解，先从简单的开始

1. flex-direction子组件排列方式，仅支持以下属性
   row效果
   水平排列.png

column效果

垂直排列.png

2. 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

3. 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的经验，只要记住快应用支持的就可以，毕竟这是两个东西两套体系，好了今天布局就简单的分析到这里，后面再复杂界面布局的分析。

这里有块应用学习的一整套完整的DEMO