快應用採坑與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/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devprepare_install_tool，你們能夠去試一下。我用了一下，ide特別吃內存，一開我電腦就死機，須要本身配置，因此乾脆就沒用這個ide了。

結語

總之目前，快應用開發確實有些困難，任重道遠，但願你們可以團結協做，讓快應用開發體驗更好。貼一個快應用微信羣，一塊兒學習，一塊兒進步