摘要：下面介紹有關(guān)的一些常用基本屬性是定義主軸的方向，常用的有，。就直接講一個稍微難一點的例子如果需要實現(xiàn)上面的情況，那么代碼如下更多的就需要自己去探索，這里就不一一講解了。

在我們常用的布局中有display + position + float進行布局，但是這些布局或多或少都有些麻煩（雖然我最喜歡用position,哈哈啥都能干)。但是由于快應(yīng)用只能夠使用flex布局，flex布局和position有沖突，所以在快應(yīng)用中能夠使用的position只有fixed，而float布局總是會出現(xiàn)各種各樣的問題，flex的優(yōu)勢就顯而易見，簡單好用。

快應(yīng)用使用的是Flex布局，每個盒子都是用有一個自帶屬性就是display: flex
所以在寫css代碼的過程中，不需要我們聲明這是一個flex盒子，這是一個flex盒子的示意圖。下面介紹有關(guān)flex的一些常用基本屬性：flex-direction;flex-wrap;justify-content;align-content;align-items;
flex-direction是定義主軸的方向，常用的有column，row。

在上面示意圖中可以看到main-axis就是水平的，flex-direction的默認設(shè)置是row，也就是我們看到的情景，如果flex-direciton只需要把他翻轉(zhuǎn)90度，就可以理解。

flex-wrap屬性默認是nowrap，也就是當內(nèi)容寬度超過容器的寬度的時候，他不會換行，會以等比例的縮小來適應(yīng)父元素的寬度，例如下：

可以看到父元素的寬度只有100px，但是子元素加起來的寬度為400px，實際顯示中兩個content會等比例縮小，在這里父元素是100px，那么每個content的寬度就只有50px;如果設(shè)置為flex-wrap: wrap；那么由于父容器的寬度容不下并列的兩個子元素，那么這有一個子元素就需要換到下一行；

設(shè)置主軸方向上元素的對齊方式：常用的有flex-start, flex-end, center, space-between, space-around。如前面flex盒子可以看到主軸的方向，下面是他們在主軸上的對齊方式，一眼就能夠看明白。

在flex的盒子示意圖上，可以看到有主軸，也有交叉軸，align-items就是用于設(shè)置交叉軸上各項目的對齊方式，可以類比justify-content。

這是用在多根軸線的問題上，在前面看flex-wrap中提到，如果使用flex-wrap: wrap那么這種情況，父元素如果包容不下子元素，那么就需要換行，換行就會出現(xiàn)多根軸線，如果flex-wrap: nowrap，或者就是默認設(shè)置，那么align-content是不生效的，這里需要主要，然后align-content能夠設(shè)置的屬性和justify-content是一樣的，只不過一個是單行，另外一個是多行。

在項目中我們經(jīng)常使用flex: 1這種屬性，flex: number 是三種屬性的簡寫：分別是flex-grow, flex-shrink，flex-basis。平時我們很少多帶帶來寫他們分別是多少，都基本寫flex: 0，或者1。flex-grow代表項目的放大比例，例如父元素的寬度是300，但是子元素的寬度加起來總共才200，子元素這時候填充不滿父元素，會留下一些空白，如果設(shè)置flex-grow為1，那么子元素就會等比例增大，將父元素的300px全部填充，如果設(shè)置0就是如果沒有充滿，也不會放大。flex-shrink就和flex-grow正好相反，就是如果內(nèi)容寬度超過了父元素的寬度，那么內(nèi)容就會等比率縮小。

flex-basis用來設(shè)置項目占據(jù)主軸的初始空間，瀏覽器通過這個來計算是否有額外的空間，一般設(shè)置為auto，就代表它占據(jù)的主軸空間是項目本身的大小。一般我們都會用到flex: 1，這就代表著flex: 1 1 0%; 那么0和auto的區(qū)別是哪里呢，比如說一個div的寬度是100px,如果設(shè)置他的flex-basis為0，那么他的初始寬度就為0，如果是auto，那么他的初始寬度就是100px，請記住這并不是他的最終寬度，例如在flex: 1中我們設(shè)置了flex-grow和flex-shrink那么他的最終寬度父容器減去剛才設(shè)置的初始寬度然后按等比率劃分，例如

在上面例子中，wrapper的寬度為100px，content的flex-basis為0，那么初始寬度就為0，但是他的最終長度不是0，因為我們設(shè)置了其他兩個屬性，需要完全占據(jù)父元素，那么content的最終寬度就為100px，是不是覺得豁然開朗了。
咱么下面進入flex的應(yīng)用。
就直接講一個稍微難一點的例子：

如果需要實現(xiàn)上面的情況，那么代碼如下：

更多的就需要自己去探索，這里就不一一講解了。

1：標簽使用受限

快應(yīng)用目前支持的標簽特別少，比如說咱們要是想段落分行，不能使用
需要使用flex進行布局，還有div標簽中不能直接輸入文字，文字必須包含在span, text所支持的標簽中。

2：border使用

在以往寫style中，如果我們需要只讓元素下面有邊框，直接使用border-bottom。但是這里不行，我們需要這么寫：

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

3:顏色支持

很多時候我們可以看到報警說這個顏色不支持，目前是支持16進制的顏色，但是有時候就是說這個有錯，但是在官網(wǎng)顏色也是這么寫的。我碰到的情況：設(shè)置背景顏色，以往使用background: #fff;但是在快應(yīng)用中需要寫：

background-color: #fff;

4: 自己支持的標簽體驗較差

tabs標簽用于來切換頁面，支持這個確實節(jié)省了很多時間，但是用戶效果并不是很好，下拉有卡頓，并且不知道他樣式是怎么弄得，點擊的時候有陰影。
list效果不好，list用于用戶滑動，但是我遇到一個問題，如果在list和其他元素在同一個div下，并且div設(shè)置flex-direction，那么list的內(nèi)容無法顯示，原因是list的內(nèi)容高度變成了0，需要css手動設(shè)置高度。

5：圖片無法顯示

在引入圖片的時候，如果使用桌面圖標的圖片，就是icon地址的圖片，無論你改了名字，還是放在組件目錄下，都無法顯示，必須引入icon地址的圖片。例如icon: "./Common/logo.png"，如果你需要使用這張圖片，必須使用Common目錄下的這張圖片，否則無法顯示。

6：調(diào)試困難

我們需要手機和電腦處于同一局域網(wǎng)，手機需要開啟代理，這還不夠，電腦需要攔截，我用的charles，在線更新的時候，必須開啟charles，特別麻煩，而且手機開了代理，有些網(wǎng)頁就上不了，電腦同樣如此。

華為開發(fā)了一個用于開發(fā)快應(yīng)用的IDE，下載地址為http://developer.huawei.com/c...，大家可以去試一下。我用了一下，ide特別吃內(nèi)存，一開我電腦就死機，需要自己配置，所以干脆就沒用這個ide了。

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