快应用采坑与flex布局讲解 - HelloWorld开发者社区

快应用之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。

快应用采坑与flex布局讲解
在上面示意图中可以看到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盒子可以看到主轴的方向，下面是他们在主轴上的对齐方式，一眼就能够看明白。

快应用采坑与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的应用。
就直接讲一个稍微难一点的例子：

快应用采坑与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手动设置高度。