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

<figcaption></figcaption>

在上面示意圖中可以看到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盒子可以看到主軸的方向，下面是他們在主軸上的對齊方式，一眼就能夠看明白。

<figcaption></figcaption>

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/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devprepare_install_tool，大家可以去試一下。我用了一下，ide特別吃記憶體，一開我電腦就當機，需要自己配置，所以乾脆就沒用這個ide了。

結語

總之目前，快應用開發確實有些困難，任重道遠，希望大家能夠團結協作，讓快應用開發體驗更好。貼一個快應用微信群，一起學習，一起進步