快应用采坑与flex布局讲解

快应用之flex布局

在咱们经常使用的布局中有display + position + float进行布局，可是这些布局或多或少都有些麻烦（虽然我最喜欢用position,哈哈啥都能干)。可是因为快应用只可以使用flex布局，flex布局和position有冲突，因此在快应用中可以使用的position只有fixed，而float布局老是会出现各类各样的问题，flex的优点就显而易见，简单好用。

快应用使用的是Flex布局，每一个盒子都是用有一个自带属性就是display: flex
因此在写css代码的过程当中，不须要咱们声明这是一个flex盒子，这是一个flex盒子的示意图。下面介绍有关flex的一些经常使用基本属性：flex-direction;flex-wrap;justify-content;align-content;align-items;
flex-direction是定义主轴的方向，经常使用的有column，row。

在上面示意图中能够看到main-axis就是水平的，flex-direction的默认设置是row，也就是咱们看到的情景，若是flex-direciton只须要把他翻转90度，就能够理解。

flex-wrap属性默认是nowrap，也就是当内容宽度超过容器的宽度的时候，他不会换行，会以等比例的缩小来适应父元素的宽度，例以下：

<div class="wrapper">
  <div class="content-one">
  </div>
  <div class="content-two">
  </div>
</div>
<style>
  .wrapper {
      width: 100px;
      height: 600px;
      display: flex;
    }
    .content-one {
      width: 200px;
      height: 300px;
    }
    .content-two {
      width: 200px;
      height: 300px;
    }
</style>

能够看到父元素的宽度只有100px，可是子元素加起来的宽度为400px，实际显示中两个content会等比例缩小，在这里父元素是100px，那么每一个content的宽度就只有50px;若是设置为flex-wrap: wrap；那么因为父容器的宽度容不下并列的两个子元素，那么这有一个子元素就须要换到下一行；

justify-content:

设置主轴方向上元素的对齐方式：经常使用的有flex-start, flex-end, center, space-between, space-around。如前面flex盒子能够看到主轴的方向，下面是他们在主轴上的对齐方式，一眼就可以看明白。

align-items：

在flex的盒子示意图上，能够看到有主轴，也有交叉轴，align-items就是用于设置交叉轴上各项目的对齐方式，能够类比justify-content。

align-content:

这是用在多根轴线的问题上，在前面看flex-wrap中提到，若是使用flex-wrap: wrap那么这种状况，父元素若是包容不下子元素，那么就须要换行，换行就会出现多根轴线，若是flex-wrap: nowrap，或者就是默认设置，那么align-content是不生效的，这里须要主要，而后align-content可以设置的属性和justify-content是同样的，只不过一个是单行，另一个是多行。

flex: number;

在项目中咱们常用flex: 1这种属性，flex: number 是三种属性的简写：分别是flex-grow, flex-shrink，flex-basis。平时咱们不多单独来写他们分别是多少，都基本写flex: 0，或者1。flex-grow表明项目的放大比例，例如父元素的宽度是300，可是子元素的宽度加起来总共才200，子元素这时候填充不满父元素，会留下一些空白，若是设置flex-grow为1，那么子元素就会等比例增大，将父元素的300px所有填充，若是设置0就是若是没有充满，也不会放大。flex-shrink就和flex-grow正好相反，就是若是内容宽度超过了父元素的宽度，那么内容就会等比率缩小。

flex-basis用来设置项目占据主轴的初始空间，浏览器经过这个来计算是否有额外的空间，通常设置为auto，就表明它占据的主轴空间是项目自己的大小。通常咱们都会用到flex: 1，这就表明着flex: 1 1 0%; 那么0和auto的区别是哪里呢，好比说一个div的宽度是100px,若是设置他的flex-basis为0，那么他的初始宽度就为0，若是是auto，那么他的初始宽度就是100px，请记住这并非他的最终宽度，例如在flex: 1中咱们设置了flex-grow和flex-shrink那么他的最终宽度父容器减去刚才设置的初始宽度而后按等比率划分，例如

<div class="wapper">
  <div class="content"></div>
</div>
<style>
  .wrapper {
    display: flex;
    width: 100px;
  }
  .content {
    flex: 1;
  }
</style>

在上面例子中，wrapper的宽度为100px，content的flex-basis为0，那么初始宽度就为0，可是他的最终长度不是0，由于咱们设置了其余两个属性，须要彻底占据父元素，那么content的最终宽度就为100px，是否是以为豁然开朗了。
咱么下面进入flex的应用。
就直接讲一个稍微难一点的例子：

若是须要实现上面的状况，那么代码以下：

<div class="wrapper">
    <div></div>
    <div></div>
    <div class="placeholder"></div>
  </div>
  <style>
    .wrapper {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
    .wrapper div {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: gainsboro;
    }
    .placeholder {
      visibility: hidden;
    }
  </style>

更多的就须要本身去探索，这里就不一一讲解了。

快应用之坑

1：标签使用受限

快应用目前支持的标签特别少，好比说我们要是想段落分行，不能使用
须要使用flex进行布局，还有div标签中不能直接输入文字，文字必须包含在span, text所支持的标签中。

2：border使用

在以往写style中，若是咱们须要只让元素下面有边框，直接使用border-bottom。可是这里不行，咱们须要这么写：

border: 0 1px solid;
  border-bottom: 1px;

3:颜色支持

不少时候咱们能够看到报警说这个颜色不支持，目前是支持16进制的颜色，可是有时候就是说这个有错，可是在官网颜色也是这么写的。我碰到的状况：设置背景颜色，以往使用background: #fff;可是在快应用中须要写：

background-color: #fff;

4: 本身支持的标签体验较差

tabs标签用于来切换页面，支持这个确实节省了不少时间，可是用户效果并非很好，下拉有卡顿，而且不知道他样式是怎么弄得，点击的时候有阴影。
list效果很差，list用于用户滑动，可是我遇到一个问题，若是在list和其余元素在同一个div下，而且div设置flex-direction，那么list的内容没法显示，缘由是list的内容高度变成了0，须要css手动设置高度。

5：图片没法显示

在引入图片的时候，若是使用桌面图标的图片，就是icon地址的图片，不管你改了名字，仍是放在组件目录下，都没法显示，必须引入icon地址的图片。例如icon: './Common/logo.png'，若是你须要使用这张图片，必须使用Common目录下的这张图片，不然没法显示。

6：调试困难

咱们须要手机和电脑处于同一局域网，手机须要开启代理，这还不够，电脑须要拦截，我用的charles，在线更新的时候，必须开启charles，特别麻烦，并且手机开了代理，有些网页就上不了，电脑一样如此。

IDE

华为开发了一个用于开发快应用的IDE，下载地址为http://developer.huawei.com/c...，你们能够去试一下。我用了一下，ide特别吃内存，一开我电脑就死机，须要本身配置，因此干脆就没用这个ide了。

结语

总之目前，快应用开发确实有些困难，任重道远，但愿你们可以团结协做，让快应用开发体验更好。贴一个快应用微信群，一块儿学习，一块儿进步